基于elementui二次封装table组件

<template>
  <el-table
    :data="tableData"
    ref="table"
    class="table"
    :header-cell-style="{ padding: '2.5px 0', background: '#ECF1F7' }"
  >
    <div v-for="(item, index) in tableHeader" :key="`tableHeader-${index}`">
      <!-- 多选框 -->
      <el-table-column
        v-if="item.type == 'selection'"
        :type="item.type"
        :width="item.width"
        :label="item.label"
        :fixed="item.fixed"
      ></el-table-column>
      <!-- 索引行 -->
      <el-table-column
        v-else-if="item.type == 'index'"
        :type="item.type"
        :width="item.width"
        :label="item.label"
        :fixed="item.fixed"
      ></el-table-column>
      <!-- 状态类型 -->
      <el-table-column
        v-else-if="item.type == 'status'"
        :label="item.label"
        :min-width="item.width"
        :prop="item.prop"
        :formatter="item.formatter"
      >
        <template scope="scope">
          <span v-if="scope.row.createStatus == 0"
            ><i class="active" style="background-color: #1349c5"></i
          ></span>
          <span v-if="scope.row.createStatus == 1"
            ><i class="active" style="background-color: #f5b923"></i
          ></span>
          <span v-if="scope.row.createStatus == 2"
            ><i class="active" style="background-color: #37c1ce"></i
          ></span>
          <span v-if="scope.row.createStatus == 3"
            ><i class="active" style="background-color: #f76359"></i
          ></span>
          <span>{{ item.formatter(scope.row[item.prop]) }}</span>
        </template>
      </el-table-column>
      <!-- 操作按钮 -->
      <el-table-column
        v-else-if="item.type == 'operation'"
        :label="item.label"
        :min-width="item.width"
        :fixed="item.fixed"
      >
        <template scope="scope">
          <el-button
            v-for="(temp, ind) in item.operation"
            :key="ind"
            @click="temp.clickFun(scope.row)"
            :type="temp.type"
            :size="temp.size"
          >
            {{ temp.name }}</el-button
          >
        </template>
      </el-table-column>
      <!-- 普通默认类型 -->
      <el-table-column
        v-else
        :label="item.label"
        :min-width="item.width"
        :prop="item.prop"
        :sortable="item.sortable"
        :formatter="item.formatter ? item.formatter : null"
      >
      </el-table-column>
    </div>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      tableHeader: [
        {
          type: "selection",
          width: "55",
          label: "多选",
          fixed: "left",
        },
        {
          type: "index",
          width: "55",
          label: "序号",
          fixed: false,
        },
        {
          label: "企业名称",
          width: "180",
          prop: "enterpriseName",
        },
        {
          label: "企业所在地",
          width: "150",
          prop: "location",
        },
        {
          label: "监管等级",
          width: "80",
          prop: "supervisionLevel",
          sortable: true,
          formatter: (item) => {
            const statusMap = {
              0: "一级",
              1: "二级",
              2: "三级",
              3: "四级",
            };
            return statusMap[item.supervisionLevel];
          },
        },
        {
          label: "监管是否变化",
          width: "80",
          prop: "supervisionChange",
          formatter: (item) => {
            const statusMap = {
              0: "否",
              1: "是",
            };
            return statusMap[item.supervisionChange];
          },
        },
        {
          label: "更新时间",
          width: "120",
          prop: "updateTime",
          sortable: true,
        },
        {
          type: "operation",
          label: "操作",
          prop: "operation",
          width: "200px",
          operation: [
            {
              name: "档案",
              clickFun: this.enterpriseArchives,
              type: "primary",
              size: "mini",
            },
            {
              name: "配置",
              clickFun: this.config,
              type: "primary",
              size: "mini",
            },
            {
              name: "审核",
              clickFun: this.examine,
              type: "primary",
              size: "mini",
            },
            {
              name: "发布",
              clickFun: this.release,
              type: "primary",
              size: "mini",
            },
          ],
        },
      ],
      tableData: [
        {
          enterpriseName: "xxxxxxx股份有限公司",
          location: "xxxxx市xxx县",
          supervisionLevel: 0,
          supervisionChange: 0,
          updateTime: "2022-04-26",
        },
      ],
    };
  },
  methods: {
    // 企业档案按钮
    enterpriseArchives() {},
    // 配置按钮
    config() {},
    // 审核按钮
    examine() {},
    // 发布按钮
    release() {},
  },
};
</script>

<style scoped>
/* 设置表格各行的padding值 */
::v-deep.el-table .el-table__cell {
  padding: 5.5px 0;
}
/* 设置表格隔行变色 */
::v-deep .el-table__row:nth-child(even) {
  background-color: #dee2ee;
}
/* 设定鼠标划过表格样式 */
::v-deep .el-table__body tr.hover-row > td.el-table__cell {
  background-color: #D6E5F8;
}
</style>