在使用antd table组件时, 合并单元格导致错位, 在网上查阅了许多资料, 发现没有太多的参考价值。因为他们都以静态数据来展示合并单元格(行/列)。比如根据行索引设定rowSpan/colSpan。 因此写下这篇文章和大家分享
表单数据采用模拟请求数据, 不是固定数量的数据. 处理方法是公用的, 有需要的直接粘去。(最下面会讲哪个属性一改就可以直接用了)
说一下大体思路:
1. 首先要明确哪些行要被合并, 计算一下。计算思路是根据某个字段, 比如性质,如果第1,2,3,4,5行性质相同,那就要合并第2,3,4,5行。antd提供了一个rowSpan属性,这个时候把第一行数据的rowSpan设置为5, 余下的2,3,4,5行 rowSpan设置为0。
2. 有这个思路后,就处理数据, 我们假设下面是接口返回过来的数据
const data = [
{
"id": "0D3B496594AE423BBC6FBB056E272824",
"property": 0,
"index": "1"
},
{
"id": "61272451951948C6856A1AB3C1A3B60C",
"property": 1,
"index": "2"
},
{
"id": "74555E8E845B4851964BFE5730BE5605",
"property": 0,
"index": "3"
},
{
"id": "572B656198E74FEB9C75C780825E34E5",
"property": 1,
"index": "4"
},
{
"id": "B2BE7F221390459293E6544340FA32EB",
"property": 2,
"index": "5"
},
{
"id": "D65AC901ACFA43B8A647739E7F4A0353",
"property": 2,
"index": "6"
},
{
"id": "4ECDF797E351405AB91522875924E773",
"property": 0,
"index": "7"
},
{
"id": "6AC3E905FE1A496BAF1CE848E8DED2CE",
"property": 2,
"index": "8"
},
{
"id": "E7ED3DED0BFE499D94D49A57B2C10F0A",
"property": 1,
"index": "9"
}
]
我们观察数据,第一条与第二条和第二条数据的性质相同,那么就要把要合并的单元格(第一行)设置一个属性, rowSpan:2; 被合并的单元格(第二行)设置一个属性,rowSpan: 0 。(被合并的单元格 rowSpan 一定要设置为0, 不然他的位置被上一行合并,他还不是0的情况下,他会被往右挤, 从而造成表格移位)
接下来上处理数据的代码:
const formatData = (data) => {
let processedData = [...data];
let prevFinishNum;
let currentIndexForSameProperty;
for (let i = 0; i < processedData.length; i++) {
const currentItem = processedData[i];
if (i === 0 || currentItem.property !== prevFinishNum) {
// 新的组开始,重置计数器,并将上一组最后一项的rowSpan设置好
if (prevFinishNum !== undefined && currentIndexForSameProperty !== undefined) {
processedData[currentIndexForSameProperty].rowSpan = i - currentIndexForSameProperty;
}
currentIndexForSameProperty = i;
currentItem.rowSpan = 1;
currentItem.opcaty = '0'; // 标识是不是被合并的行
} else {
// 相同组内,累加rowSpan
processedData[currentIndexForSameProperty].rowSpan += 1;
currentItem.opcaty = '1'; // 标识是被合并的行
}
prevFinishNum = currentItem.property;
}
// 处理数组的最后一项
if (currentIndexForSameProperty !== undefined && currentIndexForSameProperty < processedData.length - 1) {
processedData[currentIndexForSameProperty].rowSpan = processedData.length - currentIndexForSameProperty;
}
return processedData;
};
这段代码的思路就是要合并单元格的那一行, 合并了几个单元格, 就将rowSpan设置为几, 方便后续使用 onCell属性设置。被合并的单元格要加一个标识,方便后期将其rowSpan值设置为0,从而避免表格错位移位。
最后上 antd table 的代码
const columns = () => {
return [
{
title: '单元格性质',
dataIndex: 'property',
onCell: mergeRow,
width: 230
},
]
}
const mergeRow = (record, rowIndex) => {
if (record.rowSpan > 1) {
return {
rowSpan: record.rowSpan
};
} else if (record.opcaty !== '0') {
return {
rowSpan: 0
};
}
};
这样就可以根据接口返回值,实时计算要合并几格, 从而避免像官网案例上是根据索引设置静态数据合并单元格.
效果图
注意: 处理数据的逻辑可以不看,可以当作公用方法,只需要保证传入的是一维数组, 并且将其中的property属性,换成你要判断是否合并的属性即可!!!!
——————————————————————————————————————————
ps:有问题可以评论或者联系我交流