1.合并前拿到后端返回数据 进行标记添加
添加需要合并几行的标记num
//数据重新组合
assembleData(data) {
let names = [];
//筛选出不重复的 name(projectType)值,将其放到 names数组中
data.forEach((e) => {
if (!names.includes(e.projectType)) {
names.push(e.projectType);
}
});
let nameNums = [];
//将names数组中的 name值设置默认合并0个单元格,放到 nameNums中
names.forEach((e) => {
nameNums.push({ projectType: e, num: 0 });
});
//计算每种 name值所在行需要合并的单元格数
data.forEach((e) => {
nameNums.forEach((n) => {
if (e.projectType == n.projectType) {
n.num++;
}
});
});
//将计算后的合并单元格数整合到 data中
data.forEach((e) => {
nameNums.forEach((n) => {
if (e.projectType == n.projectType) {
if (names.includes(e.projectType)) {
e.mergeColumn = n.num;
//删除已经设置过的值(防止被合并的单元格进到这个 if 语句中)
names.splice(names.indexOf(n.projectType), 1);
} else {
//被合并的单元格设置为 0
e.mergeColumn = 0;
}
}
});
});
//将整理后的数据交给表格渲染
return data;
}
2.使用表格执行函数处理合并
handleSpan({ row, column, rowIndex, columnIndex }) {
//合并第1列,这里columnIndex==0,根据需求的不同,需要写死
if (columnIndex == 0) {
//计算合并的行数列数
let x = row.mergeColumn == 0 ? 0 : row.mergeColumn;
let y = row.mergeColumn == 0 ? 0 : 1;
return [x, y];
}
},