表格组件二次封装（element+vue）

后端管理系统中，常用表格展示数据，统一维护，统一表格风格，二次封装一个基于elementUI中的el-table封装一个简单的表格组件。封装组件分为四部分，表单查询条件、头部操作按钮、表格数据展示、数据分页操作。

一、表格组件封装 

1、表单查询条件 

 封装表单项，定义name、label，表单项默认为输入框，scopedSlots为表单项插槽。

// 表单项
queryForms: [{
 dataKey: 'nickName',
 label: `用户昵称`
},
{
 dataKey: 'status',
 label: `状态`,
 scopedSlots: 'query-status'
}],
// 查询参数
queryParams: {
 nickName:"",
 status:"",
 pageNum: 1,
 pageSize: 10,
},

    
    
      
      
      
      
        搜索
        重置
        
      
    

2、 头部操作按钮

头部操作按钮有，左侧插槽，放置添加、删除等按钮，右侧为若依系统封装的组件，含有重置、隐藏表单等按钮

3、表格数据展示 

表格封装分为， 表格选择、序号、文本列、列插槽，封装表格选中事件

tableColumns: [{
            dataKey: 'nickName',
            label: `用户昵称`,
          },
          {
            dataKey: 'status',
            label: `状态`,
            width: '150',
            scopedSlots: 'status',
            align: "center",
          },
          {
            dataKey: 'createDate',
            label: `创建时间`,
            width: '150',
            scopedSlots: 'date',
            align: "center",
          },
          {
            label: `操作`,
            width: '160',
            align: 'center',
            scopedSlots: 'operate',
          }
],

 

 4、数据分页操作 

5、组件完整代码

组件实例代码 

组件使用代码