vue3 ts element-plus table 动态合并列

要实现动态合并列，可以使用 Element Plus 表格组件提供的 `span-method` 属性。该属性可以设置一个方法，用于动态计算每个单元格需要合并的行数和列数。

下面是一个示例代码，使用 TypeScript 和 Element Plus 表格组件实现动态合并列：

<template>
  <el-table
    :data="tableData"
    :span-method="mergeCell"
  >
    <el-table-column
      prop="name"
      label="名称"
    />
    <el-table-column
      prop="age"
      label="年龄"
    />
    <el-table-column
      prop="gender"
      label="性别"
    />
    <el-table-column
      prop="score"
      label="分数"
    />
  </el-table>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { ElTableColumn, ElTableRow } from 'element-plus';

export default defineComponent({
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 18,
          gender: '男',
          score: 90,
        },
        {
          name: '李四',
          age: 20,
          gender: '女',
          score: 85,
        },
        {
          name: '王五',
          age: 22,
          gender: '男',
          score: 95,
        },
      ],
    };
  },
  methods: {
    mergeCell({ row, column, rowIndex, columnIndex }: {
      row: Record<string, any>;
      column: ElTableColumn;
      rowIndex: number;
      columnIndex: number;
    }): {
      rowspan: number;
      colspan: number;
    } {
      // 判断第一列是否相同
      if (columnIndex === 0) {
        let rowspan = 1;
        for (let i = rowIndex + 1; i < this.tableData.length; i++) {
          if (this.tableData[i].name === row.name) {
            rowspan++;
          } else {
            break;
          }
        }
        return {
          rowspan,
          colspan: 1,
        };
      }
      // 其他列不需要合并
      return {
        rowspan: 0,
        colspan: 0,
      };
    },
  },
});
</script>

在上面的代码中，`mergeCell` 方法会接收一个参数，包含当前单元格的行数据、列数据、行索引和列索引。通过判断第一列的值是否相同，动态计算需要合并的行数和列数，然后返回一个对象。

需要注意的是，`span-method` 属性的值是一个函数，需要使用 `defineComponent` 方法定义组件，并将该函数作为组件的一个方法。