el-table合并行前后端代码java

前端代码：

<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: []
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.$axios.get('/table_data').then(res => {
        this.tableData = res.data;
      }).catch(err => {
        console.error(err);
      });
    },
    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>

后端代码：

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class TableController {
    @GetMapping("/table_data")
    public List<Map<String, Object>> getTableData() {
        List<Map<String, Object>> data = new ArrayList<>();
        Map<String, Object> row1 = new HashMap<>();
        row1.put("name", "张三");
        row1.put("age", 18);
        row1.put("address", "北京市海淀区");
        data.add(row1);

        Map<String, Object> row2 = new HashMap<>();
        row2.put("name", "李四");
        row2.put("age", 22);
        row2.put("address", "上海市浦东新区");
        data.add(row2);

        Map<String, Object> row3 = new HashMap<>();
        row3.put("name", "王五");
        row3.put("age", 30);
        row3.put("address", "广州市天河区");
        data.add(row3);

        Map<String, Object> row4 = new HashMap<>();
        row4.put("name", "赵六");
        row4.put("age", 25);
        row4.put("address", "深圳市南山区");
        data.add(row4);

        Map<String, Object> row5 = new HashMap<>();
        row5.put("name", "钱七");
        row5.put("age", 28);
        row5.put("address", "成都市高新区");
        data.add(row5);

        Map<String, Object> row6 = new HashMap<>();
        row6.put("name", "孙八");
        row6.put("age", 32);
        row6.put("address", "重庆市江北区");
        data.add(row6);

        return data;
    }
}

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