el-table二次封装

为了提高开发效率对el-table进行二次封装,其中包含分页功能和搜索功能,代码如下:

* Props:
 *  id:组件唯一标识
 *  columns: 列属性数组参数
 *    slotName: 自定义渲染列的插槽名称
 *       ${prop}_header: 表格自带header插槽命名方法
 *    indexFn(index, row): 索引自定义方法名称
 *    其他属性同element一致(https://element.eleme.cn/#/zh-CN/component/table)
 *  pagination: 分页配置参数
 *    size-change:size改变时查询数据,如果组件需要做查询之外的操作,传size-change方法
 *    current-change:同size-change
 *    其他参数同element一致
 *  onFetchData: 请求数据
-->




表格组件封装好后,具体的使用如下:

 
        

最后一起来看一下页面效果吧

el-table二次封装_第1张图片

你可能感兴趣的:(VUE,vue.js,elementui)