使用element-ui怎么封装一个Table模板组件-创新互联

今天就跟大家聊聊有关使用element-ui怎么封装一个Table模板组件，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

专业领域包括网站制作、做网站、购物商城网站建设、微信营销、系统平台开发， 与其他网站设计及系统开发公司不同，创新互联的整合解决方案结合了帮做网络品牌建设经验和互联网整合营销的理念，并将策略和执行紧密结合，为客户提供全网互联网整合方案。

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

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

搜索功能区：

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

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

表格内容区：

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

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

可对应如下代码：

  {{scope.row.sex | 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)]
  );
}

分页器区：

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

实现代码如下：

genPagination() {
  return (
    
      
    

.seatch-form {
  text-align: left;
}
.pagination-wrap {
  margin-top: 20px;
  text-align: right;
}

      
        
        
          
            
              
姓名：{{ scope.row.name }}
              
住址：{{ scope.row.address }}
              
                {{scope.row.name}}