element表格组件 合并单元格

要在element-ui的表格组件中合并单元格，可以利用`span-method`属性来自定义合并规则。下面是一个示例代码，展示如何合并表格中相同的值：

<template>
  <el-table :data="tableData" :span-method="mergeCells">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="gender" label="性别"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 22, gender: '女' },
        { name: '王五', age: 20, gender: '男' },
        { name: '赵六', age: 22, gender: '女' }
      ]
    };
  },
  methods: {
    mergeCells({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        // 合并年龄列
        if (rowIndex === 0 || (rowIndex > 0 && row.age !== this.tableData[rowIndex - 1].age)) {
          const rowspan = this.getRowspan(row.age, columnIndex);
          if (rowspan > 1) {
            return {
              rowspan,
              colspan: 1 // 只合并一列
            };
          }
        }
      }
    },
    getRowspan(value, columnIndex) {
      let rowspan = 1;
      for (let i = this.tableData.length - 1; i > 0; i--) {
        if (this.tableData[i].age === value && i !== columnIndex) {
          rowspan++;
        } else {
          break;
        }
      }
      return rowspan;
    }
  }
};
</script>

上述代码中，我们定义了一个名为`mergeCells`的方法来确定单元格是否需要合并。在`span-method`中绑定该方法后，根据特定的条件返回合并的行数和列数。

以上代码仅合并了年龄（第二列）相同的单元格，您可以根据需要进行修改和扩展。请确保在实际使用时，将表格数据和合并规则适配到您的具体情况。