el-table合并指定列内容相同的行

为了在el-table中合并指定列内容相同的行，可以使用el-table的span-method属性。该属性允许我们自定义单元格的合并方式。下面是一个例子，假设我们要合并第一列内容相同的行：

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

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市海淀区' },
        { name: '李四', age: 20, address: '北京市海淀区' },
        { name: '王五', age: 22, address: '北京市朝阳区' },
        { name: '赵六', age: 24, address: '北京市朝阳区' }
      ]
    };
  },
  methods: {
    handleSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 如果是第一列
        if (rowIndex === 0) {
          // 如果是第一行
          return {
            rowspan: this.getRowspan(row.name, columnIndex),
            colspan: 1
          };
        } else {
          // 如果不是第一行
          if (row.name === this.tableData[rowIndex - 1].name) {
            // 如果和上一行的name相同
            return {
              rowspan: 0,
              colspan: 0
            };
          } else {
            // 如果和上一行的name不同
            return {
              rowspan: this.getRowspan(row.name, columnIndex),
              colspan: 1
            };
          }
        }
      } else {
        // 如果不是第一列
        return {
          rowspan: 1,
          colspan: 1
        };
      }
    },
    getRowspan(name, columnIndex) {
      // 获取需要合并的行数
      let rowspan = 1;
      for (let i = 0; i < this.tableData.length; i++) {
        if (i !== 0 && this.tableData[i].name !== this.tableData[i - 1].name) {
          rowspan = 1;
        }
        if (this.tableData[i].name === name && i !== columnIndex) {
          rowspan++;
        }
      }
      return rowspan;
    }
  }
};
</script>

在上面的例子中，我们使用了handleSpanMethod方法来自定义单元格的合并方式。如果是第一列，我们需要判断当前行和上一行的name是否相同，如果相同则返回{ rowspan: 0, colspan: 0 }，表示当前单元格不需要渲染。如果不相同，则需要调用getRowspan方法获取需要合并的行数，并返回{ rowspan: rowspan, colspan: 1 }。如果不是第一列，则直接返回{ rowspan: 1, colspan: 1 }。