自定义el-table表头（插槽）

子组件

<template>
  <div class="table-container">
    <el-table :data="tableData" width="100%" :row-class-name="rowClassName" :height="height" :row-style="{ height: `${rowHeight}px` }">
      <template v-for="(item, index) in tableTitle">
        <slot v-if="item.slot" :name="item.slot"></slot>
        <el-table-column
          v-else
          :key="index"
          :prop="item.property"
          :label="item.label"
          :min-width="item.minWidth ? item.minWidth : ''"
          :width="item.width ? item.width : ''"
        >
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "chris-el-table",
  props: {
    tableData: {
      // 表格数据
      type: Array,
      default: () => {
        return [];
      },
    },
    tableTitle: {
      // 表格头标题
      type: Array,
      require: true,
    },
    height: {
      // 表格高度
      type: [Number, String],
      default: "100%",
    },
    rowHeight: {
      // 表格行高
      type: [Number, String],
      default: 44,
    },
  },
  data() {
    return {};
  },
  methods: {
    rowClassName(e) {
      return e.rowIndex % 2 === 0 ? "" : "light-line";
    },
  },
};
</script>

<style scoped lang="scss">
.table-container {
  ::v-deep .el-table {
    background-color: transparent;
    &::before {
      // 表格底部边框
      background: none;
    }
    tbody tr:hover > td {
      // 表格触碰样式
      background-color: #f5f7fa;
    }
  }
  ::v-deep .el-table__header-wrapper {
    .el-table__cell {
      // 表头样式
      height: 44px;
      padding: 0;
      background: #ffffff;
      border-bottom: #ebeef5 solid 1px !important;
      text-align: center;
    }
  }
  ::v-deep .el-table__body-wrapper {
    &::-webkit-scrollbar {
      // 表格滚动条
      width: 0 !important;
    }
    .el-table__row {
      // 表格行样式
      background-color: #f5f7fa;
      .el-table__cell {
        padding: 0;
        text-align: center;
        border-bottom: #ebeef5 solid 1px !important;
      }
    }
    .light-line {
      // 高亮行颜色
      background-color: #ffffff;
    }
  }
}
</style>

父组件

<chris-el-table :table-title="tableTitle" :table-data="tableData">
      <el-table-column slot="num" label="申请单号">
        <template slot-scope="scope">
          <span @click="jump_equipmentResume" style="text-decoration: underline">{{ scope.row.num }}</span>
        </template>
      </el-table-column>

      <el-table-column slot="Descriptions" label="状态">
        <template slot-scope="scope">
          <el-tag type="success">{{ scope.row.status === "1" ? "已完成" : scope.row.status === "2" ? "待验收" : "已关闭" }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column slot="handle" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)">编辑</el-button>
          <el-button @click="handleClick(scope.row)">删除</el-button>
          <el-button @click="handleClick(scope.row)">审核</el-button>
          <el-button @click="handleClick(scope.row)">关闭</el-button>
        </template>
      </el-table-column>
    </chris-el-table>
    
 <script>
export default {
  name: "equipmentSubscription",
  data() {
    return {
      tableTitle: [
        // 以下得item,可以随意摆放，调整列位置
        {
          // label: "申请单号", //表头名
          slot: "num", //列的字段名
        },
        {
          slot: "Descriptions",
        },
        {
          label: "姓名",
          property: "name",
        },
        {
          slot: "reson",
        },
        {
          label: "地址",
          property: "address",
        },
        {
          slot: "handle",
        },
      ],
      tableData: [
        {
          num: "292123122",
          name: "王小虎",
          status: "1",
          reson: "未知",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          num: "292132131",
          name: "王小虎",
          status: "1",
          reson: "自身愿意",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          num: "292132221",
          name: "王小虎",
          status: "2",
          reson: "外界因素",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          num: "292144321",
          name: "王小虎",
          status: "3",
          reson: "未知1",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleClick(row) {
      console.log(row);
    },
    jump_equipmentResume() {
      this.$router.push({
        name: "equipmentResume",
      });
    },
  },
};
</script>