el-table合并行前后端代码

前端代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名" :formatter="nameFormatter"></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: 22, address: '上海市浦东新区' },
        { name: '王五', age: 30, address: '广州市天河区' },
        { name: '赵六', age: 25, address: '深圳市南山区' },
        { name: '钱七', age: 28, address: '成都市高新区' },
        { name: '孙八', age: 32, address: '重庆市江北区' },
      ]
    }
  },
  methods: {
    nameFormatter(row, column, cellValue, index) {
      const currentName = row.name;
      const nextRow = this.tableData[index + 1];
      const nextName = nextRow && nextRow.name;
      if (currentName === nextName) {
        return {
          rowspan: 2,
          value: currentName
        };
      } else {
        return currentName;
      }
    }
  }
}
</script>

后端代码：

from flask import Flask, jsonify
app = Flask(__name__)

@app.route('/table_data')
def get_table_data():
    data = [
        {'name': '张三', 'age': 18, 'address': '北京市海淀区'},
        {'name': '李四', 'age': 22, 'address': '上海市浦东新区'},
        {'name': '王五', 'age': 30, 'address': '广州市天河区'},
        {'name': '赵六', 'age': 25, 'address': '深圳市南山区'},
        {'name': '钱七', 'age': 28, 'address': '成都市高新区'},
        {'name': '孙八', 'age': 32, 'address': '重庆市江北区'}
    ]
    return jsonify(data)

前端通过调用后端接口获取数据，并在 nameFormatter 方法中判断当前行和下一行的 name 是否相同，如果相同则返回 rowspan 为 2 的对象，否则返回当前 name。这样就可以实现 el-table 的行合并效果。