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