@ElementUI中表格的合并行
在需求中遇到了elementUI合并行,找了几位大佬的文章,奈何过于愚钝,百思不得其解(对不起,我脑子转不动了),不会用啊!最后找到了方法(时间久了,大佬的链接找不到了,基本上就是复制大佬的),一个不用动脑子就能用的代码,看代码:
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
console.log(row.cc, column, rowIndex, columnIndex);
//想合并第几列的行,就去判断 if (columnIndex === n)
if (columnIndex === 0) {
return {
rowspan: row.rowspan,
colspan: row.rowspan > 0 ? 1 : 0,
};
}
if (columnIndex === 1) {
return {
rowspan: row.rowspan1,
colspan: row.rowspan1 > 0 ? 1 : 0,
};
}
},
setrowspans(list) {
list.forEach((v) => {
v.rowspan = 1;
v.rowspan1 = 1;
});
// 双层循环
for (let i = 0; i < list.length; i++) {
for (let j = i + 1; j < list.length; j++) {
//判断对应列想要合并的字段
if (list[i].cc === list[j].cc) {
list[i].rowspan++;
list[j].rowspan--;
} else {
break;
}
if (list[i].ydh === list[j].ydh) {
list[i].rowspan1++;
list[j].rowspan1--;
} else {
break;
}
}
// 这里跳过已经合并的行数据,从下一次需要合并的行开始
i = i + list[i].rowspan - 1;
}
},