基于element-ui封装一个Table模板组件

大家在做后台管理系统的时候，写的最多的可能就是表格页面了，一般分三部分：搜索功能区、表格内容区和分页器区。一般这些功能都是使用第三方组件库实现，比如说element-ui，或者vuetify。这两个组件库都各有各的优点，但就table组件来说，我还是比较喜欢vuetify的实现，不用手写一个个column，只要传入headers的配置数组就行，甚至分页器都内置在了table组件里，用起来十分方便。有兴趣可以看看：vuetify data table。

上面是一个经典的用element-ui开发的table页面，而且实际工作中如果每个table页面都写一遍，重复代码太多了，所以不妨写一个table模板组件，减少重复代码。我的思路是这样的：

1. 搜索功能区：

   提供searchBar插槽，可以自定义搜索输入框，搜索、重置按钮必有，新增按钮通过props控制显隐。这里对应的代码如下：

   genSearchBar() {
       if (this.noSearchBar || !this.$scopedSlots.searchBar) return '';
       return (
           
               {this.$scopedSlots.searchBar()}
               
                   查询
               
               
                   重置
               
               
                   新增
               
           
       );
   }
   
   

2. 表格内容区：

   通过传入headers自动生成columns，参数如下：

   {
       label: '性别',
       prop: 'sex',
       width: '180',
       filter: 'sexFilter'
   }
   

   可对应如下代码：

   注意，只支持全局filter。

   如果你想自定义column，也提供tableColumn插槽，支持自定义column，可以如下配置：

   {
       prop: 'action'
   }
   

   这样，就会按传入的prop匹配对应的column，十分方便。

   实现代码如下：

   genTableSlot(h) {
       let customeColumns = this.$scopedSlots.tableColumn
           ? this.$scopedSlots.tableColumn()
           : [];
       return this.headers.map((item) => {
           // 根据item.prop判断是否使用传入的插槽内容
           let foundItem = customeColumns.find(
               (ele) =>
                   ele.componentOptions &&
                   ele.componentOptions.propsData.prop === item.prop
           );
           return foundItem
               ? foundItem
               : h('el-table-column', {
                     props: {
                         ...item,
                     },
                     scopedSlots: {
                         default: (props) => {
                             // 根据传入的全局filter处理column数据
                             let filter = this.$options.filters[
                                 item.filter
                             ];
                             let itemValue = props.row[item.prop];
                             return h(
                                 'span',
                                 filter ? filter(itemValue) : itemValue
                             );
                         },
                     },
                 });
       });
   }
   

   genTable(h) {
       return h(
           'el-table',
           {
               ref: 'tableRef',
               props: {
                   ...this.$attrs,
                   data: this.data,
               },
               on: {
                   'selection-change': (val) => {
                       this.$emit('selection-change', val);
                   },
               },
           },
           [...this.genTableSlot(h)]
       );
   }
   

3. 分页器区：

   如无特殊需求，分页器功能一致，所以直接内置。

   实现代码如下：

   genPagination() {
       return (
           
   
               
           
       );
   }
   

   最后附完整代码和demo：

   Demo: