ElementUI的Table控件,合併列

spanRows: [],//需要合併的行
spanMap: [],//從第幾行到第幾行需要合併

//計算需要合併的行號
                            for (let k = 0; k < that.tableData.length; k++) {
                                //判斷當前圖片類型是否與下一個圖片類型一致,如果一致則當前行單元格需要合併。
                                if ((k + 1 < that.tableData.length && that.tableData[k].PIC_TYPE == that.tableData[k + 1].PIC_TYPE) || that.tableData[k].PIC_TYPE == that.tableData[k - 1].PIC_TYPE) {
                                    that.spanRows.push(k);
                                }
                            }
                            console.log("需要合併的行號", that.spanRows);

                            //從第幾行到第幾行需要合併
                            let defType = '';
                            for (let m = 0; m < that.tableData.length; m++) {
                                if (m == 0) {
                                    defType = that.tableData[m].PIC_TYPE;//記錄第一個
                                }
                                if (m + 1 < that.tableData.length) {
                                    if (defType == that.tableData[m + 1].PIC_TYPE) {
                                        if (that.spanMap.filter(x => x.sign == defType).length == 0) {
                                            that.spanMap.push({ sign: defType, startRowIndex: m, rowSpanCount: 2 });
                                        } else {
                                            for (let i = 0; i < that.spanMap.length; i++) {
                                                if (that.spanMap[i].sign == defType) {
                                                    that.spanMap[i].rowSpanCount += 1;
                                                }
                                            }
                                        }
                                    } else {
                                        defType = that.tableData[m + 1].PIC_TYPE;//記錄第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) {
                //是否從此行開始合併
                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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章