使用antd + vue + Table 实现合并单元格
// 函数-合并单元格
const changeData = (data1: any, index: any) => {
let count = 0;
let indexCount = 1;
let field = '';
if (index == 1) {
field = 'oneTargetName';
} else if (index == 2) {
field = 'twoTargetName';
} else if (index == 3) {
field = 'threeTargetName';
} else if (index == 4) {
field = 'fourTargetName';
}
try {
while (indexCount < data1.length) {
let item = data1.slice(count, count + 1)[0];
if (!item['rowSpan' + index]) {
item['rowSpan' + index] = 1;
// item['assessResult' + index] = item.assessResult;
// console.log(item.targetName, item.assessResult);
}
if (item[field] === data1[indexCount][field]) {
item['rowSpan' + index]++;
data1[indexCount]['rowSpan' + index] = 0;
} else {
count = indexCount;
}
indexCount++;
}
} catch {}
return data1;
};
用法:
for (let i = 0; i < res.response.modelLevel - 1; i++) { //res.response.modelLevel 层级
lists = changeData(lists, i + 1);
}
dataSource.value = lists;
lists数据格式:
lists = [
{
id: "e7534e2edaaf421db981c25d475b11e1"
oneTargetId: "5e07f9b16564485293f98ab5791129d8"
oneTargetName: "兵役征集"
targetId: "f9a93154c29f48a083779c97a73c2f09"
targetName: "适龄青年征集率评分"
targetSort: 3
targetType: "叶级指标"
twoTargetId: "3680223777614a698e036adc6ddd078d"
twoTargetName: "济南"
weight: 0.1
}
]
合并后:
lists = [
{
id: "e7534e2edaaf421db981c25d475b11e1"
oneTargetId: "5e07f9b16564485293f98ab5791129d8"
oneTargetName: "兵役征集"
rowSpan1: 0 //合并单元格字段
rowSpan2: 0 //合并单元格字段
targetId: "f9a93154c29f48a083779c97a73c2f09"
targetName: "适龄青年征集率评分"
targetType: "叶级指标"
twoTargetId: "3680223777614a698e036adc6ddd078d"
twoTargetName: "济南"
weight: 0.1
}
]
columns = [
{
title: '一级指标',
align: 'center',
children: [
{
title: '指标名称',
dataIndex: 'oneTargetName',
key: 'age',
align: 'center',
width: 100,
customCell: (_, index) => ({
rowSpan: _.rowSpan1, //合并单元格
}),
customRender: ({ text }) => {
return <div style={{ whiteSpace: 'pre-wrap' }}>{text}</div>;
},
},
],
},
]