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 2024-03-25 10:33  邢帅杰  阅读(9)  评论(0编辑  收藏  举报