element合并多列表格

文章链接来源https://blog.csdn.net/lomeo23/article/details/81289751

// 计算需要合并的单元格
        getSpanData(pdata) {
            /**
             * 初始化合并参数表
             */
            const cols = [
                {
                    name: 'pointName', //参与计算的列名，必须和el-table-column prop='category'值一致
                    getValue(row) { //该列用于比较的值的获取方法
                        return row.pointName;
                    },
                },
                {
                    name: 'pointType', 
                    getValue(row) {
                        return row.pointType;
                    },
                },
                {
                    name: 'unit', 
                    getValue(row) {
                        return row.unit;
                    },
                }
            ];//参与合并的字段，在这里增加即可
            const loca = []; //合并坐标与数量
            for (const i in cols) {
                loca.push({
                    rowSpan: 1,
                    colSpan: 1,
                    rowIndex: null,
                    colProperty: cols[i].name,
                    value: null,
                    getValue: cols[i].getValue,
                });
            }
            for (let i = 0; i < pdata.length; i++) {
                pdata[i].cellSpans = [];
                for (const _w in loca) {
                    const w = loca[_w];
                    if (i === 0 || w.value !== w.getValue(pdata[i])) {//边界指针，1.第一条硬性第一个边界 2.与上一单元格值不同的属于边界
                        w.rowIndex = i;//行索引，若下一单元格值相同则以此索引叠加rowSpan值
                        w.rowSpan = 1;//rowSpan默认1
                        w.value = w.getValue(pdata[i]);//单元格值
                    } else {
                        //若本单元格值==上一单元格值则合并列，rowSpan+=1
                        for (const p in pdata[w.rowIndex].cellSpans) {
                            const n = pdata[w.rowIndex].cellSpans[p];
                            if (n.colProperty === w.colProperty) {
                                n.rowSpan += 1;
                            }
                        }
                    }
                }

                pdata[i].cellSpans = JSON.parse(JSON.stringify(loca));//深度复制，否则总是指向最后一条数据
            }
        },
        handleObjectSpanMethod({ row, column, rowIndex, columnIndex }) {
            //遍历本行合并表
            for (const i in row.cellSpans) {
                const _r = row.cellSpans[i];
                //列属性匹配
                if (_r.colProperty === column.property) {
                    //若合并表指向本单元格则构建合并参数并返回
                    if (_r.rowIndex === rowIndex) {
                        return {
                            rowspan: _r.rowSpan,
                            colspan: _r.colSpan
                        };
                    } else {//否则隐藏该单元格。这里必须有，否则单元格会被右移一列
                        return {
                            rowspan: 0,
                            colspan: 0
                        };
                    }
                }
            }
        },