posts - 609,  comments - 13,  views - 64万
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

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

posted on   邢帅杰  阅读(19)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示