elementui 表格多行相同的数据合并的实现，以及代码示例

在 ElementUI 表格中，可以通过设置 `span-method` 属性来实现多行相同数据的合并。具体实现步骤如下：

1. 在表格数据中，找出需要合并的相同数据，并记录下它们在数据中的行数范围。

2. 在表格组件中，定义一个 `spanMethod` 方法，用于根据行数范围来设置需要合并的单元格的 `rowspan` 属性。

下面是一个示例代码，演示如何在 ElementUI 表格中实现多行相同数据的合并：

<template>
  <el-table :data="tableData" :span-method="spanMethod">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市海淀区' },
        { name: '李四', age: 20, address: '上海市浦东新区' },
        { name: '王五', age: 18, address: '北京市海淀区' },
        { name: '赵六', age: 22, address: '广州市天河区' },
        { name: '钱七', age: 18, address: '北京市海淀区' },
      ],
    };
  },
  methods: {
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 找出需要合并的行数范围
        let startRowIndex = rowIndex;
        let endRowIndex = rowIndex;
        for (let i = rowIndex - 1; i >= 0; i--) {
          if (this.tableData[i].name === row.name) {
            startRowIndex = i;
          } else {
            break;
          }
        }
        for (let i = rowIndex + 1; i < this.tableData.length; i++) {
          if (this.tableData[i].name === row.name) {
            endRowIndex = i;
          } else {
            break;
          }
        }
        // 设置需要合并的单元格的 rowspan 属性
        const rowspan = endRowIndex - startRowIndex + 1;
        if (rowIndex === startRowIndex) {
          return { rowspan: rowspan, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
    },
  },
};
</script>

在上面的示例代码中，`spanMethod` 方法会在渲染每个单元格时被调用。如果当前单元格是第一列，则会根据该行数据在表格中的行数范围来设置需要合并的单元格的 `rowspan` 属性。如果当前单元格不是第一列，则返回 `{ rowspan: 0, colspan: 0 }`，表示不需要合并。