el-table如何合并属性值相同的单元格

在Element UI的el-table组件中，如果你想合并属性值相同的单元格，可以借助`row-key`和`span-method`这两个特性来实现。`row-key`用于唯一标识每一行的数据，而`span-method`是一个自定义函数，允许你在渲染表格时动态地设置每个单元格的宽度。

下面是一个简单的例子：

<template>
  <el-table
    :data="tableData"
    row-key="id" <!-- 这里指定按id字段合并行 -->
    :span-method="handleSpanMethod">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <!-- 其他列... -->
  </el-table>
</template>

<script>
export default {
  methods: {
    handleSpanMethod({ row, column, rowIndex, columnIndex }, parentRow, parentColumn) {
      // 如果当前单元格的值与上一行的相同，并且不是第一列，那么返回一个大于1的数字表示合并
      if (columnIndex > 0 && row[columnKey] === parentRow[columnKey]) {
        return { rowspan: 2 };
      }
      return {};
    },
  },
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '张三', address: '上海' },
        { id: 3, name: '李四', age: 30 },
        { id: 4, name: '王五', age: 30 },
      ],
      columnKey: 'name', // 根据需要合并的属性确定这个键名
    };
  },
};
</script>

在这个示例中，如果`name`属性的值连续出现，它将被合并成一个2行高的单元格。