Vue3+Ts+Element-Plus多级表头以及动态合并单元格

在Vue3和Element-Plus中实现多级表头和动态合并单元格，可以使用el-table组件的span-method属性。该属性接受一个方法，该方法返回一个包含两个元素的数组，分别决定每个单元格的rowspan和colspan。

以下是一个简单的例子，演示如何实现多级表头和动态合并单元格：

<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column
      label="日期"
      rowspan="2"
      align="center"
      prop="date"
      width="150"
    ></el-table-column>
    <el-table-column
      label="姓名"
      rowspan="2"
      align="center"
      prop="name"
      width="150"
    ></el-table-column>
    <el-table-column label="上午" align="center">
      <el-table-column label="时间" align="center" prop="morning.time"></el-table-column>
      <el-table-column label="状态" align="center" prop="morning.status"></el-table-column>
    </el-table-column>
    <el-table-column label="下午" align="center">
      <el-table-column label="时间" align="center" prop="afternoon.time"></el-table-column>
      <el-table-column label="状态" align="center" prop="afternoon.status"></el-table-column>
    </el-table-column>
  </el-table>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
 
interface TableData {
  date: string;
  name: string;
  morning: {
    time: string;
    status: string;
  };
  afternoon: {
    time: string;
    status: string;
  };
}
 
export default defineComponent({
  name: 'MultiHeaderTable',
  data() {
    return {
      tableData: [
        {
          date: '2023-01-01',
          name: '张三',
          morning: { time: '08:00', status: '正常' },
          afternoon: { time: '13:00', status: '晚到' },
        },
        // ...更多数据
      ],
    };
  },
});
</script>

在这个例子中，我们定义了一个带有多个嵌套字段的TableData接口来表示表格数据。然后在模板中，我们使用el-table组件来展示数据，并通过嵌套el-table-column来创建多级表头。span-method属性可以用来动态合并单元格，但在这个例子中我们没有使用它，因为我们的表格不需要动态合并单元格。