效果图:
data() {
return {
topicsOptions,
recordData: [],
loading: false,
checkedColumns: 1,
columns: [
{
title: "功能",
ellipsis: true,
customRender: (text, row) => {
if (text != '') {
const obj = {
children: this.topicsOptions[text.topicType],
attrs: {},
};
obj.attrs.rowSpan = mergeCells(row.topicType, this.recordData, 'topicType');
return obj;
}
},
},
{
title: "马达名称",
ellipsis: true,
customRender: (text, row) => {
if (text != '') {
const obj = {
children: text.name,
attrs: {},
};
obj.attrs.rowSpan = mergeCells(row.name, this.recordData, 'name');
return obj;
}
},
},
{dataIndex: "dataTopic", title: "Topic", ellipsis: true},
{dataIndex: "direction", title: "数据方向", ellipsis: true},
{dataIndex: "des", title: "描述", ellipsis: true},
]
}
},
recordData:
[{"topicType":0,"dataTopic":"V2/geek/mark_cl/mark_1001/heartbeat","des":"网关心跳上报通道","direction":"上行"},{"topicType":1,"dataTopic":"V2/geek/mark_cl/mark_1001/gateway_info_on","des":"设备固件版本信息上行","direction":"上行"},{"topicType":1,"dataTopic":"V2/geek/mark_cl/mark_1001/gateway_info_down","des":"获取设备固件版本信息下行","direction":"下行"},{"topicType":1,"dataTopic":"V2/geek/mark_cl/mark_1001/upgrade_on","des":"设备上报固件升级信息","direction":"上行"},{"topicType":1,"dataTopic":"V2/geek/mark_cl/mark_1001/upgrade_down","des":"固件升级信息下行","direction":"下行"},{"topicType":1,"dataTopic":"V2/geek/mark_cl/mark_1001/upgrade_percent","des":"设备上报固件升级进度","direction":"上行"},{"topicType":1,"dataTopic":"V2/geek/mark_cl/mark_1001/upgrade_pull","des":"设备主动拉取固件升级信息","direction":"上行"},{"topicType":2,"dataTopic":"V2/geek/mark_cl/mark_1001/ntp_on","des":"NTP 时钟同步请求","direction":"上行"},{"topicType":2,"dataTopic":"V2/geek/mark_cl/mark_1001/ntp_down","des":"NTP 时钟同步响应","direction":"下行"}]
const temp = {} // 当前重复的值,支持多列
const mergeCells = (text, array, columns) => {
let i = 0;
let isContinuous = false;// 判断是否连续
if (text !== temp[columns]) {
temp[columns] = text
for(let j = 0; j< array.length;j++) {
let item = array[j]
if (item[columns] === temp[columns]) {
i += 1
isContinuous = true
} else {
if (isContinuous) break
}
}
}
return i
}
// const temp = {} // 当前重复的值,支持多列
// function mergeCells(text, data, columns) {
// let i = 0;
// let isContinuous = false;// 判断是否连续
// // 判断text值与上一次保存的值是否相等
// if (text !== temp[columns]) {
// temp[columns] = text;
// try {
// data.forEach((item) => {
// if (item[columns] === temp[columns]) {
// i += 1;
// isContinuous = true;// 数据连续时,i一直累加
// } else {
// // 当isContinuous为真时,证明已经断续了,报错一个错误跳出循环,这样将不会遍历断续后的相同的数据(导致表格变形)
// if (isContinuous) throw new Error("finish");
// }
// });
// } catch (e) {
// console.log("断续跳出");
// }
// }
// // 如果这次的值与上次的值相等,返回i,并且i = 0。
// return i
// }
参考链接
Antd Table表格动态合并单元格(更新)
https://blog.csdn.net/weixin_46554760/article/details/119749790