Vue Element UI 表格合并单元格：el-table-column 的 :span-method 实现

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名" :span-method="nameSpanMethod"></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: 18, gender: '男' },
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 25, gender: '女' },
        { name: '王五', age: 30, gender: '男' },
      ]
    }
  },
  methods: {
    nameSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return {
          rowspan: 1,
          colspan: 1
        };
      }
      if (this.tableData[rowIndex].name === this.tableData[rowIndex - 1].name) {
        return {
          rowspan: 0,
          colspan: 0
        };
      } else {
        return {
          rowspan: 1,
          colspan: 1
        };
      }
    }
  }
}
</script>
<p>在上面的示例中，我们使用了 nameSpanMethod 方法来自定义合并逻辑。在该方法中，我们判断当前行的 name 属性是否和上一行的 name 属性相同，如果相同，则返回 { rowspan: 0, colspan: 0 } 来表示不需要合并单元格；如果不相同，则返回 { rowspan: 1, colspan: 1 } 来表示需要合并单元格。</p>