el-table 动态合并单元格，附原文合并表头 -- 合并单元格 -- 表尾合计 -- 修改/拆分合并单元格 -- 动态单元格合并 -- 动态合并单元格链接

在Vue.js中使用Element UI的el-table组件时，可以通过span-method属性来实现动态合并表格单元格。以下是一个简单的例子，展示了如何合并表格的表尾合计行中的单元格。

<template>
  <el-table :data="tableData" border style="width: 100%" span-method="mergeRows">
    <el-table-column prop="date" label="日期" width="150"></el-table-column>
    <el-table-column prop="name" label="姓名" width="150"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <!-- 其他列 -->
    <el-table-column label="合计" width="150">
      <template v-slot="scope">
        {{ getSum(scope.row) }}
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 数据对象...
      ],
      mergeIndex: 0, // 合并单元格的行索引
    };
  },
  methods: {
    mergeRows({ row, column, rowIndex }) {
      if (column.property === 'date') {
        if (rowIndex === this.mergeIndex) {
          return [1, 2]; // 合并1行，2列
        } else if (rowIndex === this.tableData.length - 1) {
          return [0, 0]; // 不合并
        }
      }
    },
    getSum(row) {
      // 计算合计逻辑
      return '合计数据';
    },
  },
};
</script>

在这个例子中，mergeRows方法会根据当前行的索引和列的属性来决定是否合并单元格。如果是日期列，并且是预定义的合并行索引（mergeIndex），则合并该行的两个单元格。如果是表格的最后一行，则不合并单元格。getSum方法用于计算每行的合计数据。

注意：span-method属性接受一个函数，这个函数的参数是一个对象，包含row（当前行数据）、column（当前列数据）和rowIndex（当前行索引），返回值应该是一个数组，数组中包含两个元素，分别表示该单元格应该向下合并的行数和向右合并的列数。