首先先介绍1级数据的情况，一级数据即为后端返回的是一维对象数据，并不是树形结构，通过对象中的相同参数名，进行合并。
2.概念
1.首先我们要知道的知识点：
Element为我们提供了一个合并行或列的计算方法:span-method，该方法接收4个参数Function({ row, column, rowIndex, columnIndex })
row：当前行值,也就是tableData里的值
column：当前列的值,也就是tableData里的值
rowIndex：当前行的序号（从0开始）
columnIndex：当前列的序号（从0开始）
该方法return一个对象{rowspan，colspan}
rowspan：表示合并多少行
colspan：表示合并多少列
如果是(0,0)表示不展示这条数据
2.接着来理清我们的思路
我们这个需求需要实现的是合并列，如果是从0开始的话，我们需要的是合并第0、1、2、4列，其实我们会发现其中第0列和第4列合并的单元格时一致的，第1和2列合并的单元格是一致的。
那怎么知道我们需要合并的列数呢？那就需要通过返回的数据对其进行判断了，由数据推理可得，当id值一致时，表示是同一个产品，当project_id或者是acceptance_id相同时表示是同一个一级项目和允收标准。
3.实现
{{menuStr.title}}
新增
二。树形结构合并单元格
// 模拟后台返回的假数据
getTable() {
this.tableData6 = [
{
gwsn: "Anet",
meterUseInfos: [
{
dsPort: "com1",
dsName: [
{ name: "1#" },
{ name: "局放" },
{ name: "噪声传感器1" },
{ name: "噪声传感器2" },
{ name: "烟感1" },
],
instrumentAddress: [
{ address: "1" },
{ address: "2" },
{ address: "3" },
{ address: "4" },
{ address: "5" },
],
},
{
dsPort: "com2",
dsName: [{ name: "三层北" }, { name: "二层南" }],
instrumentAddress: [{ address: "6" }, { address: "7" }],
},
],
time: "2020-11-30 13:00:00",
},
];
this.getIndex();
},
// 测试表格
getIndex() {
let arr = [];
let s = 0;
let table = this.tableData6;
let getTable = [];
table.forEach((item, i, data) => {
window.count = item.meterUseInfos.length;
if (arr.length) {
s = arr[arr.length - 1].row + data[i - 1].meterUseInfos.length;
}
arr.push({
row: s,
index: item.meterUseInfos.length,
});
//遍历遇到哪级出现了数组就遍历
if (item.meterUseInfos && item.meterUseInfos.length) {
item.meterUseInfos.forEach((comItem, index1) => {
if (comItem.dsName && comItem.dsName.length) {
comItem.dsName.forEach((subItem, index2) => {
getTable.push({
gwsn: item.gwsn,
dsPort: comItem.dsPort,
dsName: subItem.name,
count: item.meterUseInfos[index1].dsName.length,
instrumentAddress:
item.meterUseInfos[index1].instrumentAddress[index2]
.address,
});
});
}
});
}
});
this.arr = arr;
this.tableData6 = getTable;
},
//合并单元格
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
// console.log(window.count);
// console.log(this.rowIndex);
console.log(columnIndex);
let dsPortFixed = this.tableData6[0].dsPort;
if (columnIndex === 0) {
if (rowIndex % this.tableData6.length === 0) {
return {
rowspan:
dsPortFixed == row.dsPort
? this.tableData6.length + 1
: this.tableData6.length,
colspan: 1,
};
} else {
return {
rowspan: 0,
colspan: 0,
};
}
} else {
if (columnIndex === 1) {
if (rowIndex % 5 === 0) {
return {
rowspan: 5, // 此方法此处的有问题，无法适应多数动态的数据，建议使用第一种，普适性强！！！ 喜欢
colspan: 1,
};
} else {
return {
rowspan: 0,
colspan: 0,
};
}
}
}
},
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）