el-table表格动态合并相同数据单元格(可指定列+自定义合并)

在Vue.js中使用Element UI的el-table组件时，可以通过使用span-method属性来实现动态合并同一列中相同数据的单元格。以下是一个简单的例子，演示如何根据用户ID来合并特定列的单元格：

<template>
  <el-table :data="tableData" border style="width: 100%" :span-method="mergeSameCells">
    <el-table-column prop="id" label="用户ID" width="180"></el-table-column>
    <el-table-column prop="name" label="用户名"></el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', ... },
        { id: 1, name: '张三', ... },
        { id: 2, name: '李四', ... },
        // 更多数据
      ],
    };
  },
  methods: {
    mergeSameCells({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) { // 假设我们要合并第一列
        const cellValue = row[column.property];
        const nextRowValue = this.tableData[rowIndex + 1]?.[column.property];
        if (nextRowValue === cellValue) {
          return {
            rowspan: 0, // 这里设置为0表示合并后这一行将不显示
            colspan: 1,
          };
        }
      }
    },
  },
};
</script>

在这个例子中，mergeSameCells方法会在每个单元格渲染时调用，如果发现下一行的同一列数据与当前行相同，则通过返回一个对象指定该单元格应该合并的行数和列数，本例中是合并当前单元格和下一个单元格，并且不显示当前单元格内容。这样，所有具有相同ID的用户ID列中的单元格都会被合并。