vue2 + ElementUI el-table 封装，摆脱前辈复杂逻辑，咱先来点简单的，通俗易懂

表格是这样子封装的

<template>
  <div>
    <el-table
      :data="propTableData"
      :border="tableBorder"
      style="width: 100%"
      :height="tableHeight"
      :max-height="tableMaxHeight"
      :stripe="tableStripe"
      :size="tableSize"
      :fit="tableFit"
      :show-header="tableShowHeader"
      :highlight-current-row="hightCurrentRow"
      @selection-change="handleSelectionChange"
      :tooltip-effect="tooltipEffect"
      :show-summary="showSummary"
      :sum-text="sumText"
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :span-method="spanMethod"
      :row-key="tableRowKey"
    >
      >
      <el-table-column v-if="showSelect" type="selection" width="55">
      </el-table-column>
      <el-table-column
        v-for="(item, index) in Object.keys(extendInfo)"
        :key="index"
        :prop="item"
        :label="extendInfo[item].label"
        :width="extendInfo[item].width"
        :show-overflow-tooltip="showOverflowTooltip"
        :align="tableColumnAlign"
        :formatter="extendInfo[item].formatter"
        :filters="extendInfo[item].filters"
        :filter-method="extendInfo[item].filterData"
        :sortable="extendInfo[item].sortable"
        :resizable="tableResizable"
      >
      </el-table-column>

      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <span v-for="(item, index) in handleOptions" :key="index">
            &nbsp;
            <el-button
              @click="tableBtnClick(scope.row)"
              :type="item.type"
              :icon="item.icon"
              size="small"
              >{{ item.btnText }}</el-button
            >
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" :class="needCenter ? 'center-layout' : ''">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="currentPageSize"
        :layout="pageLayout"
        :total="totalDataNum"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { Loading } from "element-ui";
import Vue from "vue";
export default {
  name: "Vue2TemplateIndex",
  props: {
    /**
     * -----------------------------
     * 需要传的参数
     */
    propTableData: {
      type: Array,
      default: () => [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎1",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          children: [
            {
              id: 11,
              date: "2016-05-02",
              name: "王小虎1",
              province: "上海",
              city: "普陀区",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              id: 12,
              date: "2016-05-02",
              name: "王小虎1",
              province: "上海",
              city: "普陀区",
              address: "上海市普陀区金沙江路 1518 弄",
            },
          ],
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "王小虎2",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "王小虎5",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333,
        },
        {
          id: 4,
          date: "2016-05-03",
          name: "王小虎3",
          province: "上海",
          city: "普陀区",
          address:
            "上海市普陀区金沙江路 1516 弄22222222222222222222222222222222222222222222222222",
          zip: 200333,
        },
      ],
    },
    extendInfo: {
      type: Object,
      default: () => ({
        date: {
          label: "日期",
          width: 150,
          /**
           * 数据格式化
           * @param {*} row
           * @param {*} column
           * @param {*} cellValue
           * @param {*} index
           */
          formatter(row, column, cellValue, index) {
            return cellValue;
          },
        },
        name: {
          label: "姓名",
          width: 150,
          /**
           * 该列数据是否拥有排序功能
           */
          sortable: true,
        },
        province: {
          label: "省份",
          width: 150,
        },
        city: {
          label: "城市",
          width: 150,
        },
        address: {
          label: "地址",
          width: 150,
        },
        zip: {
          label: "邮编",
          width: 150,
          /**
           * 筛选项     text:筛选项的中文名   value:筛选项的值
           */
          filters: [
            {
              text: "200333",
              value: "200333",
            },
            {
              text: "200334",
              value: "200334",
            },
            {
              text: "200335",
              value: "200335",
            },
          ],
          /**
           * 拥有这个属性，某一列表格就有筛选属性
           *
           */
          filterData: (value) => {
            console.log(value);
          },
        },
      }),
    },
    // 操作列选项
    handleOptions: {
      type: Array,
      default: () => [
        {
          btnText: "查看",
          type: "primary",
          icon: "el-icon-search",
        },
        {
          btnText: "编辑",
          type: "warning",
          icon: "el-icon-edit",
        },
        {
          btnText: "删除",
          type: "danger",
          icon: "el-icon-delete",
        },
      ],
    },
    // 表格合并方案
    spanMethod: {
      type: Function,
    },
    // 表格数据总量
    totalDataNum: {
      type: Number,
      default: 1000,
    },
    // 每页数据尺寸选项
    pageSizes: {
      type: Array,
      default: () => [100, 200, 300, 400],
    },
    // 分页布局
    pageLayout: {
      type: String,
      default: () => "total, sizes, prev, pager, next, jumper",
    },
    //分页是否需要居中显示
    needCenter: {
      type: Boolean,
      default: true,
    },
    // 如果有子表格需要指定 rowKey
    tableRowKey: {
      type: String,
      default: () => "id",
    },

    /**
     * -----------------------------
     * 需要传的参数
     */

    /**
     * -----------------------------
     * 默认参数
     */

    // 表格的高度   null值时，为自动高度
    tableHeight: {
      type: Number,
      default: () => null,
    },
    // 表格最大高度
    tableMaxHeight: {
      type: Number,
      default: () => null,
    },
    //    表格是否有斑马纹
    tableStripe: {
      type: Boolean,
      default: () => true,
    },
    // 表格是否有纵向边框
    tableBorder: {
      type: Boolean,
      default: () => true,
    },
    // 表格是否可以拖动大小 表格有边框时候奏效
    tableResizable: {
      type: Boolean,
      default: () => false,
    },
    // 表格尺寸     medium / small / mini
    tableSize: {
      type: String,
      default: () => "mini",
    },
    // 表格列宽是否自动撑开
    tableFit: {
      type: Boolean,
      default: () => true,
    },
    // 是否需要显示表头
    tableShowHeader: {
      type: Boolean,
      default: () => true,
    },
    // 是否要高亮当前行
    hightCurrentRow: {
      type: Boolean,
      default: () => true,
    },
    // 是否需要选择框
    showSelect: {
      type: Boolean,
      default: () => true,
    },
    // 数据过长是否可鼠标悬浮展示
    showOverflowTooltip: {
      type: Boolean,
      default: () => true,
    },
    // 鼠标悬浮溢出文字展示样式
    tooltipEffect: {
      type: String,
      default: () => "dark",
    },
    // 每一行数据对齐方式   left/center/right
    tableColumnAlign: {
      type: String,
      default: () => "center",
    },
    // 是否展示合计行
    showSummary: {
      type: Boolean,
      default: () => true,
    },
    // 合计行第一列名称
    sumText: {
      type: String,
      default: () => "合计",
    },

    /**
     * -----------------------------
     * 默认参数
     */
  },
  data() {
    return {
      currentPage: 1,
      currentPageSize: 100,
    };
  },
  created() {},
  methods: {
    handleSelectionChange(e) {
      this.$emit("changeSelection", e);
    },
    tableBtnClick(e) {
      this.$emit("childTableClick", e);
    },
    handleSizeChange(e) {
      this.currentPageSize = e;
      this.$emit("changePageSize", e);
    },
    handleCurrentChange(e) {
      this.$emit("changePage", e);
    },
  },
};
</script>

<style lang="scss" scoped>
.block {
  margin: 10px;
}
.center-layout {
  text-align: center;
}
</style>

父组件是这样子用封装的表格的

<template>
  <div>
    home主页
    <PropTableVue @childTableClick="childTableClick"></PropTableVue>
  </div>
</template>

<script>
import PropTableVue from "../components/propTable";
export default {
  name: "Vue2TemplateHome",
  components: {  PropTableVue },
  data() {
    return {};
  },

  mounted() {},

  methods: {
   
    childTableClick(e) {
      console.log(e);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

大部分功能都是常用的默认值，每个功能都有注释。