封裝一個優雅的element ui表格組件

如今作後臺系統用vue + elementUI 的愈來愈多，那element ui的 el-table 組件確定也離不開。雖然element ui的table組件很好。可是表格和分頁是分離的。每次寫表格的時候都要寫分頁。這個就比較麻煩了。那咱們可不能夠把表格和分頁封裝在一塊兒呢？照這個思路那咱們從新封裝一個帶分頁的表格。

思路：

1. 表格組件要包含分頁，不用每次都從新寫分頁
2. 儘可能保證el-table原生方法
3. 方便易用

照這個思路咱們開始寫代碼
先把表格和分頁寫在一塊兒

<template>
    <div>
        <!-- 表格數據 -->
        <el-table
        highlight-current-row  //點擊當前行高亮
        :data="tableDate"      //表格數據
        border                 //添加斑馬線
        :height="tableHeight"  //表格高度
        v-loading="loading"    //loading動畫
        :size="size"           //表格大小
        @sort-change = "sortChange"  //排序
        @selection-change="selectionChange" //多選
        @current-change="currentChange" 
        @row-click = "rowClick"    //單行點擊
        style="width: 100%">
            <slot></slot>
        </el-table>
        <el-pagination
        v-if="paging"
        @size-change="limitChange"
        @current-change="pageChange"
        :current-page.sync="params.page"
        :page-size="params.limit"
        :page-sizes="[10, 15, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableCount">
        </el-pagination>
    </div>
</template>
<script>
export default {
  props: {
    //請求接口
    api: {
      required: true
    },
    //參數  默認返回分頁和條數
    params: {
      type: [Object,String,Number],
      default: function() {
        return { page: 1, limit: 15 };
      }
    },
    // 尺寸
    size: {
      default: 'small'
    },
    // 分頁
    paging: {
      default: true
    }
  },
  data() {
    return {
      tableCount: 0, //總條數
      tableDate: [], //表格數據
      loading: false, //loading動畫
    };
  },
  created() {
    this.init(this.params);
  },
  computed: {
    // 實時更新server
    server:function(){
      return this.api.split('.')[0]
    },
    // 實時更新url
    url:function(){
      return this.api.split('.')[1]
    },
    tableHeight:function(){
      return this.paging?'calc(100% - 32px)':'100%'
    }
  },
  methods: {
    init(params) {
      this.loading = true;
      //若是採用微服務的方式須要傳微服務和url
      this.$api[this.server][this.url](params)
        .then(res => {
          this.tableDate = res.data || [];
          // 若是有分頁
          if(this.paging){
            this.tableCount = res.count || 0;
            this.params.page = res.curr || 0;
          }
        })
        .finally(() => {
          //關閉loading
          this.loading = false; 
        });
    },
    // 從新請求 //若是須要從新請求使用$refs 調用這個方法
    reload() {
      // 若是有分頁
      if(this.paging){
        this.params.page = 1;
      }
      // api動態加載完 開始從新請求數據
      this.$nextTick(()=>{
        this.init(this.params);
      })
    },
    如下是對el-table原來的方法再次封裝emit出去
    // 多選
    selectionChange(val){
      this.$emit('selection-change',val)
    },
    // 單選
    currentChange(currentRow, oldCurrentRow){
      this.$emit('current-change',currentRow, oldCurrentRow)
    },
    rowClick(row, event, column){
      this.$emit('row-click',row, event, column)
    },
    // 排序
    sortChange(column, prop, order){
      this.$emit('sort-change',column, prop, order)
    },
    // 表格翻頁
    pageChange(page) {
      this.params.page = page;
      this.init(this.params);
    },
    limitChange(limit){
      this.params.limit = limit;
      this.init(this.params);
    },
  }
};
</script>

別人使用起來很是簡單 ,也不用再寫任何請求方法
能夠全局引入

<d-table 
    api="bizSystemService.getEmployeeList" //微服務名稱+接口名稱
    :params="queryForm"    //接口請求的參數. 默認是limit和page
    ref="table"
    size="small">
    //下面的使用方式和el-table同樣
    <el-table-column
            align="center"
            label="序號"
            width="50">
            <template slot-scope="scope">
            {{scope.$index+1}}
            </template>
        </el-table-column>
        <el-table-column
            prop="roleTypeName"
            align="center"
            label="角色類型"
            width="120">
            <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">編輯</el-button>
        </template>
        </d-table-column>
    </el-table>

若是想刷新數據 使用reload方法便可. this.$refs.table.reload()

原文地址：https://segmentfault.com/a/1190000017346342