el-table 动态合并相同数据的列

为了动态合并el-table中相同数据的列，我们需要通过循环数据源来获取需要合并的行数和列数，并使用mergeCell方法来实现合并。具体步骤如下：

1.在el-table中添加自定义的表格列，用于合并单元格。

2.在自定义表格列中使用mergeCell方法来实现单元格的合并。

下面是一个示例代码，用于合并el-table中相同数据的列：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <<el-table-column label="合并列" align="center">
      <template slot-scope="scope">
        <span v-if="scope.row.mergeRow" :rowspan="scope.row.mergeRow">{{ scope.row.name }}</span>
        <span v-else>{{ scope.row.name }}</span>
      </template>
    </el-table-column>>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18 },
        { name: '李四', age: 20 },
        { name: '王五', age: 22 },
        { name: '张三', age: 24 },
        { name: '李四', age: 26 },
        { name: '王五', age: 28 }
      ]
    }
  },
  methods: {
    mergeCell({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 判断是否为第一列
        let rowspan = 1
        for (let i = rowIndex + 1; i < this.tableData.length; i++) {
          if (this.tableData[i].name === row.name) {
            rowspan++
          } else {
            break
          }
        }
        if (rowspan > 1) {
          return {
            rowspan: rowspan,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  }
}
</script>