ElementUI的Table控件，合并列

x

//计算需要合并的列
                            for (let k = 0; k < that.tableData.length; k++) {
                                //判断当前类型是否与下一个类型一致，一致则两个单元格合并。
                                if ((k + 1) < that.tableData.length && (that.tableData[k].ITEM_TYPE == that.tableData[k + 1].ITEM_TYPE || that.tableData[k].ITEM_TYPE == that.tableData[k - 1].ITEM_TYPE)) {
                                    that.spanColumns.push(k);
                                }
                            }
                            console.log("that.spanColumns", that.spanColumns);

                            for (let m = 0; m < that.spanColumns.length; m++) {
                                if (m == 0) {
                                    that.spanMap.push({ startRowIndex: that.spanColumns[m], endRowIndex: that.spanColumns[m] + 1 });
                                } else {
                                    for (let n = 0; n < that.spanMap.length; n++) {
                                        if (that.spanMap[n].endRowIndex == that.spanColumns[m]) {
                                            that.spanMap[n].endRowIndex = that.spanColumns[m] + 1;
                                        }
                                    }
                                }
                            }
                            console.log("that.spanMap", 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].endRowIndex,//合并的行数
                        colspan: 1//合并的列数
                    };
                } else {
                    if (that.spanColumns.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