spanRows: [],//需要合并的行
spanMap: [],//从第几行到第几行需要合并
//计算需要合并的行号 for (let k = 0; k < that.tableData.length; k++) { //判断当前系统货号是否与下一个一致,如果一致则当前行单元格需要合并。 let kn = k + 1; if (kn < that.tableData.length) { if (that.tableData[k].IDX == that.tableData[kn].IDX) { if (!that.spanRows.includes(k)) { that.spanRows.push(k); } if (!that.spanRows.includes(kn)) { that.spanRows.push(kn); } } } } console.log("需要合并的行号", that.spanRows); //从第几行到第几行需要合并 let defObj = 0; for (let m = 0; m < that.tableData.length; m++) { if (m == 0) { //记录第一个 defObj = that.tableData[m].IDX; } if (m + 1 < that.tableData.length) { if (defObj == that.tableData[m + 1].IDX) { if (that.spanMap.filter(x => x.sign == defObj).length == 0) { that.spanMap.push({ sign: defObj, startRowIndex: m, rowSpanCount: 2 }); } else { for (let i = 0; i < that.spanMap.length; i++) { if (that.spanMap[i].sign == defObj) { that.spanMap[i].rowSpanCount += 1; } } } } else { defObj = that.tableData[m + 1].IDX;//记录第m个 } } } console.log("从第几行到第几行需要合并", that.spanMap);
控件
<el-table :data="tableData" :span-method="objectSpanMethod">
objectSpanMethod:
//合并第一列 row:当前行。column:当前列。rowIndex:当前行号,0开始。columnIndex:当前列号,0开始。 objectSpanMethod({ row, column, rowIndex, columnIndex }) { //明细模式需要计算合并行 //第一列 if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) { //是否从此行开始合并 let cur = that.spanMap.filter(function (v) { return v.startRowIndex == rowIndex; }); if (cur && cur.length > 0) { return { rowspan: cur[0].rowSpanCount,//合并的行数 colspan: 1//合并的列数 }; } else { if (that.spanRows.includes(rowIndex)) { //被合并的行,第一列移除掉。返回都是0,就会移除此行的第一列。 return { rowspan: 0, colspan: 0 }; } else { //不需要合并的行,正常输出第一列。返回1,就是正常输出,不做任何改变。 return { rowspan: 1, colspan: 1 }; } } } },
ele:https://element.eleme.cn/#/zh-CN/component/table
JS高阶函数、JS数组响应式操作、JS判断数组是否包含某个元素 https://www.cnblogs.com/xsj1989/p/13098537.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通