el-table合并单元格

要在 el-table 中合并单元格，可以使用 el-table-column 的 `span-method` 属性。该属性接受一个函数作为参数，用于计算每个单元格需要占据的行数和列数。下面是一个示例：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址" :span-method="addressSpanMethod"></el-table-column>
</el-table>

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市海淀区' },
        { name: '李四', age: 20, address: '北京市海淀区' },
        { name: '王五', age: 22, address: '上海市浦东新区' },
        { name: '赵六', age: 24, address: '上海市浦东新区' },
      ],
    };
  },
  methods: {
    addressSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0 || row.address !== this.tableData[rowIndex - 1].address) {
        // 当前单元格是该列的第一个，或者与上一个单元格的值不相等
        let rowspan = 1;
        // 找到该单元格下面连续的行数
        for (let i = rowIndex + 1; i < this.tableData.length; i++) {
          if (this.tableData[i].address === row.address) {
            rowspan++;
          } else {
            break;
          }
        }
        return {
          rowspan,
          colspan: 1,
        };
      } else {
        // 当前单元格与上一个单元格的值相等
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
    },
  },
};

在上面的示例中，我们定义了一个 `addressSpanMethod` 方法，用于计算地址列中每个单元格需要占据的行数和列数。该方法接受一个对象作为参数，包含了当前单元格的行、列、行索引和列索引等信息。在方法中，我们通过比较当前单元格和上一个单元格的值，来确定是否需要合并单元格。如果需要合并单元格，则计算出需要占据的行数和列数，返回一个包含 `rowspan` 和 `colspan` 属性的对象。如果不需要合并单元格，则返回 `{ rowspan: 0, colspan: 0 }`。最后，在地址列中通过设置 `:span-method="addressSpanMethod"` 来使用该方法。