表格行动态合并 实现下图效果
image.png
columns设置如下
const columns = [
{
title: "参会者姓名",
dataIndex: 'nickname',
key: 'nickname',
customCell: (value: any, index: number) => {
if (data.value[index - 1] && data.value[index - 1].key === value.key) {
return { rowSpan: 0 };
}
if (data.value[index + 1]) {
let count = 0
for (let i = index; i < data.value.length; i++) {
if (data.value[i].key === value.key) {
count++
} else {
break
}
}
return { rowSpan: count }
}
},
},
{
title: "区域",
dataIndex: 'country',
key: 'country',
customCell: (value: any, index: number) => {
if (data.value[index - 1] && data.value[index - 1].key === value.key) {
return { rowSpan: 0 };
}
if (data.value[index + 1]) {
let count = 0
for (let i = index; i < data.value.length; i++) {
if (data.value[i].key === value.key) {
count++
} else {
break
}
}
return { rowSpan: count }
}
},
},
{
title: $t('next06.125'),
dataIndex: 'joinTime',
key: 'joinTime'
},
{
title: $t('next06.126'),
dataIndex: 'leaveTime',
key: 'leaveTime'
},
{
title: $t('next06.127'),
dataIndex: 'duration',
key: 'duration',
}
]
实现原理：
在data中找到需要合并行的相同数据
先寻找上一条数据是否为要合并的对象，是的话就隐藏掉本行
再去寻找接下来的几条数据是否为需要合并的对象，如果是的话则进行合并
检测的顺序不可调换
