今天就跟大家聊聊有關使用element-ui怎么封裝一個Table模板組件，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

大家在做后臺管理系統(tǒng)的時候，寫的最多的可能就是表格頁面了，一般分三部分：搜索功能區(qū)、表格內容區(qū)和分頁器區(qū)。一般這些功能都是使用第三方組件庫實現(xiàn)，比如說element-ui，或者vuetify。這兩個組件庫都各有各的優(yōu)點，但就table組件來說，我還是比較喜歡vuetify的實現(xiàn)，不用手寫一個個column，只要傳入headers的配置數組就行，甚至分頁器都內置在了table組件里，用起來十分方便。有興趣可以看看：vuetify data table。

上面是一個經典的用element-ui開發(fā)的table頁面，而且實際工作中如果每個table頁面都寫一遍，重復代碼太多了，所以不妨寫一個table模板組件，減少重復代碼。我的思路是這樣的：

搜索功能區(qū)：

提供searchBar插槽，可以自定義搜索輸入框，搜索、重置按鈕必有，新增按鈕通過props控制顯隱。這里對應的代碼如下：

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

表格內容區(qū)：

通過傳入headers自動生成columns，參數如下：

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

可對應如下代碼：

  {{scope.row.sex | sexFilter}}

注意，只支持全局filter。

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

{
  prop: 'action'
}

  
    編輯
    刪除
  

這樣，就會按傳入的prop匹配對應的column，十分方便。

實現(xiàn)代碼如下：

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)]
  );
}

分頁器區(qū)：

如無特殊需求，分頁器功能一致，所以直接內置。

實現(xiàn)代碼如下：

genPagination() {
  return (