el-table 如何根据表格数据合并行？

Question

el-table 如何根据表格数据合并行。

如图所示，name列的值一样，就合并成一行；Amount 1列合并成3行
演示地址

<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="amount1" label="Amount 1" />
      <el-table-column prop="amount2" label="Amount 2" />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import type { TableColumnCtx } from 'element-plus'

interface User {
  id: string
  name: string
  amount1: string
  amount2: string
}

interface SpanMethodProps {
  row: User
  column: TableColumnCtx<User>
  rowIndex: number
  columnIndex: number
}

const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {
  return {
    rowspan: 1,
    colspan: 1,
  }
}

const tableData: User[] = [
  {
    id: '12987122',
    name: 'Tom',
    amount1: '234',
    amount2: '3.2'
  },
  {
    id: '12987123',
    name: 'Tom',
    amount1: '234',
    amount2: '4.43'
  },
  {
    id: '12987124',
    name: 'Tom',
    amount1: '324',
    amount2: '1.9'
  },
  {
    id: '12987125',
    name: 'Tom',
    amount1: '324',
    amount2: '2.2'
  },
  {
    id: '12987126',
    name: 'Tom',
    amount1: '539',
    amount2: '4.1'
  },
]
</script>

Answer 1

可以参考这个，虽然是vue2，但是方法逻辑是一样的。
https://blog.csdn.net/mf_717714/article/details/82494376