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

作者站长头像
站长
· 阅读数 13

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

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>
回复
1个回答
avatar
test
2024-06-18

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

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容