vue3+element 动态表头

<template>
  <div class="tableBox">
    <h2>Vue3 + Element plus 动态行合并表格</h2>
    <el-table :data="tableData" style="width: 100%" @row-click="getRow" border>
      <el-table-column type="index" label="序号" width="70"></el-table-column>
      <el-table-column
        :prop="item.prop"
        :label="item.label"
        :type="item.type"
        :width="item.width"
        :fixed="item.fixed"
        :header-align="item.headerAlign"
        :sortable="item.sortable"
        show-overflow-tooltip
        v-for="(item, index) in tableHeader"
        :key="index"
      >
        <template #default="scope">
          <!-- 除操作option和expand展开以外的 -->
          <p v-if="item.prop !== 'option' && !item.type">
            <!-- 在此处table数据中添加formatter -->
            {{
              scope.row.formatter
                ? scope.row.formatter(scope.row[item.prop], item.prop)
                : scope.row[item.prop]
            }}
          </p>
          <!-- 仅包含操作option和expand展开以外的 -->
          <div v-if="item.prop == 'option' && !item.type">
            <!-- 仅展示图标用类名修正样式 -->
            <el-button
              :class="item.onlyIcon ? 'hasIcon' : ''"
              v-for="item in scope.row[item.prop]"
              @click.native.stop="getDetail(item, scope.row)"
              :type="item.type"
              :size="item.size"
              :icon="item.icon"
              >{{ item.name }}
            </el-button>
          </div>
          <!-- 展开部分业务 -->
          <div v-if="item.type == 'expand'">{{ scope.row }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from "vue";
// 动态表头el-table-column遍历获得
/* 
  type 对应列的类型selection / index / expand
  prop  字段名称
  label 显示的标题
  width 对应列的宽度
  fixed 列是否固定在左侧或者右侧。 true / 'left' / 'right'
  sortable  对应列是否可以排序  false
  header-align  表头对齐方式  left / center / right
*/
const tableHeader = [
  {
    type: "expand",
    prop: "birth",
    label: "",
    width: 60,
    align: "center",
    fixed: "left",
    headerAlign: "center",
  },
  {
    prop: "name",
    label: "姓名",
    width: 100,
    sortable: true,
    headerAlign: "center",
  },
  {
    prop: "phone",
    label: "电话",
    width: 150,
  },
  {
    prop: "province",
    label: "省份",
    width: 100,
  },
  {
    prop: "city",
    label: "市区",
    width: 100,
  },
  {
    prop: "address",
    label: "详细地址",
    width: 220,
  },
  {
    prop: "option",
    label: "操作按钮",
  },
];
const tableData = [
  {
    name: "张三",
    province: "上海市",
    city: "普陀区",
    address: "金沙江路 1518 弄",
    birth: "2016-05-02",
    phone: "12345678910",
    option: [
      {
        name: "",
        icon: "Edit",
        size: "small",
        type: "primary",
        onlyIcon: true,
      },
      {
        name: "编辑",
        type: "danger",
        icon: "Check",
        size: "small",
        onlyIcon: false,
      },
    ],
    formatter: (row, index) => {
      switch (index) {
        case "name":
          return "formatter" + row;
        case "address":
          return "address" + row;
        default:
          return row;
      }
    },
  },
  {
    name: "李四",
    birth: "2016-05-02",
    province: "上海市",
    city: "普陀区",
    address: "金沙江路 1517 弄",
    age: 19,
    phone: "12345678911",
    option: [
      {
        name: "",
        type: "success",
        icon: "Message",
        size: "small",
        onlyIcon: true,
      },
      {
        name: "编辑",
        type: "info",
        icon: "Star",
        size: "default",
        onlyIcon: false,
      },
    ],
  },
  {
    name: "王五",
    birth: "2016-05-03",
    province: "上海市",
    city: "普陀区",
    address: "金沙江路 1519 弄",
    phone: "12345678912",
    option: [
      {
        name: "新增",
        type: "success",
        icon: "Message",
        size: "small",
        onlyIcon: true,
      },
      {
        name: "",
        type: "info",
        icon: "Star",
        size: "default",
        onlyIcon: true,
      },
    ],
  },
];

const getDetail = (info, detail1) => {
  console.log(info);
  console.log(detail1);
};
const getRow = (row, column, event) => {
  console.log(row, column, event, "getRow");
};
const getFormatter = (row, column, cellValue, index) => {
  console.log("row, column, cellValue, index", row, column, cellValue, index);
};
</script>

<style scoped lang="scss">
.tableBox {
  ::v-deep {
    .hasIcon span {
      margin-right: 0;
      margin-left: 0;
    }
  }
}
</style>