Vue3 + Antd 3 front end realizes cell merging
If the data returned by the backend interface directly specifies the attributes of the relevant merge, then it can be used directly, and the following methods are not required.
If the interface data does not give the relevant merge attributes, then the front-end needs to handle the merge by itself, and needs to add the rowSpan attribute (realize the style in the above figure) by itself. The code is as follows: (only the method of modifying the data is shown, and the development is carried out according to the actual data format required. Revise)
const columns = [
{
title: '日志分类',
dataIndex: 'logType',
customCell: (_, index) => {
if (_.rowSpan > 0) {
return {
rowSpan: _.rowSpan }
} else {
return {
rowSpan: 0 }
}
}
},
]
1. The data is out of order (the data that needs to be merged are not next to each other)
//假数据
let a = {
pages: 1,
records: [
{
id: '1',
logType: '设备分类1',
logTypeChild: 'CPU',
orgId: null,
ruleNo: '9999'
},
{
id: '2',
logType: '设备分类2',
logTypeChild: 'CPU',
orgId: null,
ruleNo: '9999'
},
{
id: '3',
logType: '设备分类4',
logTypeChild: 'CPU',
orgId: null,
ruleNo: '9999'
},
{
id: '4',
logType: '设备分类2',
logTypeChild: 'CPU',
orgId: null,
ruleNo: '9999'
},
{
id: '5',
logType: '设备分类2',
logTypeChild: 'CPU',
orgId: null,
ruleNo: '9999'
}
],
total: 5
}
let newData = [] //如果数据顺序错乱，newData 这个步骤可以调整顺序
for (let i = 0; i < a.records.length; i++) {
let num = 0
let flag = true
if (newData.length > 0) {
//判断是否已经添加
for (let k = 0; k < newData.length; k++) {
if (newData[k].id == a.records[i].id) {
flag = false
}
}
}
if (flag) {
num++ //为了让不需要合并的单元格rowspan=1
newData.push(a.records[i])
}
for (let j = i + 1; j < a.records.length; j++) {
if (a.records[j].logType == a.records[i].logType && !a.records[i].hasOwnProperty('rowSpan')) {
num++
Reflect.set(a.records[j], 'rowSpan', 0) //需要合并的rowspan都是0
newData.push(a.records[j])
}
}
Reflect.set(a.records[i], 'rowSpan', num)
//注意：push()方法是浅拷贝，record[i]修改，newData自动修改
//newData[i]=a.records[i]
}
a.records = newData
2. The data is in order (data that needs to be merged next to each other)
//类似这样
records: [
{
id: '1',
logType: '设备分类1',
logTypeChild: 'CPU1',
orgId: null,
ruleNo: '9999'
},
{
id: '2',
logType: '设备分类2',
logTypeChild: 'CPU2',
orgId: null,
ruleNo: '9999'
},
{
id: '3',
logType: '设备分类2',
logTypeChild: 'CPU3',
orgId: null,
ruleNo: '9999'
},
{
id: '4',
logType: '设备分类5',
logTypeChild: 'CPU4',
orgId: null,
ruleNo: '9999'
},
{
id: '5',
logType: '设备分类5',
logTypeChild: 'CPU5',
orgId: null,
ruleNo: '9999'
}
for (let i = 0; i < a.records.length; i++) {
let num = 1 //为了区分被合并项，需要初始为1
for (let j = i + 1; j < a.records.length; j++) {
if (a.records[j].logType == a.records[i].logType && !a.records[i].hasOwnProperty('rowSpan')) {
num++
Reflect.set(a.records[j], 'rowSpan', 0)
}
}
if (!a.records[i].hasOwnProperty('rowSpan')) {
//这个判断必不可少，防止已经存在rowSpan=0的数据被改
Reflect.set(a.records[i], 'rowSpan', num)
}
}