子元件：

<template>
  <div>
    <!-- S 表格 A -->
    <el-table stripe :data="tableData" :header-cell-style="{background:'#eef1f6',color:'#606266'}" @selection-change="selectionChange">
      <template slot="empty">
        <div class="empty-cont"><img :src="mTable.img" alt=""><span>{{mTable.description}}</span></div>
      </template>
      <!-- /預設頁 -->

      <slot v-if
 
="showSelection" name="showSelection" />
      <!-- /多選插槽 -->

      <slot v-if="headerSlot" name="headerSlot" />
      <!-- /頭部插槽 -->

      <template v-for="(item, index) in columns">
        <el-table-column :key="index" :prop="item.prop" :label="item.label" :align="item.align" :width="item.width" :class="item.style" :formatter="item.formatter?item.formatter : formatterValue">
        </el-table-column>
      </template>
      <!-- /表格內容 -->

      <slot v-if
 
="footerSlot" name="footerSlot" />
      <!-- /尾部插槽 -->
    </el-table>
    <!-- E 表格 A -->

    <!-- S 分頁 B -->
    <el-pagination background style="text-align: right;" v-if="showPagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pager.pageNo"
      :page
 
-size="pager.pageSize" :total="pager.totalCount" layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- E 分頁 B -->
  </div>
</template>

<script>
export default {
  name: "elementTable",
  props: {
    empty: Object, //預設
    columns: Array, //表格的列
    tableData: Array, //表格的資料
    showSelection: { type: Boolean, default: false }, //是否顯示多選
    /**表格*/
    pager: Object, //分頁傳值
    showPagination: { type: Boolean, default: false }, //是否顯示分頁
    headerSlot: { type: Boolean, default: false },  //是否顯示頭部插槽
    footerSlot: { type: Boolean, default: false },  //是否顯示底部插槽
    /**分頁*/
  },
  computed: {
    // 預設頁預設值
    mTable () {
      return Object.assign({
        img: 'https://xx.png',
        description: "暫無資料"
      }, this.empty);
    },
  },
  methods: {
    /**當選擇項發生變化時會觸發該事件*/
    selectionChange (val) { this.$emit('selectionChange', val) },
    //$emit 繫結一個自定義事件event，被執行時將引數傳遞給父元件，父元件通過@event監聽並接收引數

    /**分頁*/
    handleSizeChange (val) { this.$emit('handleSizeChange', val) },
    handleCurrentChange (val) { this.$emit('handleCurrentChange', val) },

    /**表格內容插槽*/
    formatterValue (row, column, cellValue) { return cellValue },
  }
}
</script>

<style lang='scss' scoped>
  /* 預設頁
            ---------------------------------------------------------------- */
  .empty-cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 40px 0;
    > img {
      width: 20%;
      height: 20%;
    }
    span {
      font-size: 14px;
      line-height: 1.8;
    }
  }
</style>

父元件：

<template>
 <div>
  <!-- S 表格 A -->
  <elTable :columns="columns" :tableData="tableData" :footerSlot="footerSlot" :showPagination="showPagination" :pager="listPagination" :empty="empty" :showSelection="showSelection"
   @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">

   <el-table-column slot="showSelection" width="88" label="全選" align="center" type="selection">
   </el-table-column>
   <!-- /全選 -->


   <el-table-column slot="footerSlot" label="操作" align="right" width="200">
    <template slot-scope="scope">
     <el-button type="text">按鈕</el-button>
    </template>
   </el-table-column>
   <!-- /尾部 -->
  </elTable>
  <!-- E 表格 A -->
 </div>
</template>

<script>
import elTable from "../../components/CommonTable/index";
export default {
  name: "sell",
  components: { elTable },
  data () {
    return {
      empty: {
        img: "https://XXX.png",
        description: "暫無"
      },//預設頁
      showSelection: true, // 多選插槽
      footerSlot: true, // 尾部插槽
      columns: [
        { label: "單號", prop: "number", align: "left" },
        { label: "時間", prop: "date", align: "right" },
      ],//列屬性
      tableData: [], //表格資料
      showPagination: true, //是否分頁
      listPagination: {
        current: 1,
        size: 10,
        totalCount: 0,
      },//分頁
    };
  },
  mounted () {
    // this._list();
  },
  methods: {
    /**
     * 列表
    */
    _list () {
      this.$api.xx(this.listPagination).then((res) => {
        this.tableData = res.data.list;
        this.listPagination.totalCount = res.data.totalCount;
      });
    },

    /**
     * 分頁
    */
    handleSizeChange (val) {
      this.listPagination.size = val;
    },
    handleCurrentChange (val) {
      this.listPagination.current = val;
    },
  },
};
</script>