element-ui table 数组同类项合行

在Element-UI的Table组件中，如果需要将中相邻的同类项合并为行，可以使用自定义的合并行函数来实现。具体骤如下：

1. 首先，在Table组件中设置`row-span-method`属性为一个自定义的方法名，例如`mergeRows`。
2. 在Vue实例中定义`mergeRows`方法，该方法接收三个参数：当前行数据（row）、当前列数据（column）、当前行索引（rowIndex）。
3. 在`mergeRows`方法中，判断当前行与上一行是否需要合并。如果需要合并，则返回合并的行数（即rowspan），否则返回1。
4. 在模板中，使用`row-span-method`属性绑定到自定义的合并行函数。

下面是一个示例代码：

<template>
  <el-table :data="tableData" row-span-method="mergeRows">
    <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: 22, gender: '男' },
        { name: '赵六', age: 25, gender: '女' },
        { name: '钱七', age: 25, gender: '女' },
      ],
    };
  },
  methods: {
    mergeRows(row, column, rowIndex) {
      if (rowIndex === 0) {
        return 1; // 第一行不需要合并
      }
      const prevRow = this.tableData[rowIndex - 1];
      if (row.age === prevRow.age && row.gender === prevRow.gender) {
        return 0; // 合并行数为0，表示与上一行合并
      }
      return 1; // 不需要合并
    },
  },
};
</script>

这样，相邻的同类项就会合并为一行显示在Table组件中。