elementUI table表格合并单元格

 

Table组件上设置：

:span-method="handleSpan"

在Data数据里存储表格合并的相关数据：

 // 记录合并单元格的相关数据
                firstArr:[],
                firstPos:0,
                secondArr:[],
                secondPos:0,
                thirdArr:[],
                thirdPos:0,

 

核心方法，在methods里：

handleSpan({ row, column, rowIndex, columnIndex }){
                if (columnIndex === 0) {
                    // 第一列的合并方法
                    const row1 = this.firstArr[rowIndex];
                    const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
                    return {
                        rowspan: row1,
                        colspan: col1,
                    };
                } else if (columnIndex === 1) {
                    // 第二列的合并方法
                    const row2 = this.secondArr[rowIndex];
                    const col2 = row2 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
                    return {
                        rowspan: row2,
                        colspan: col2,
                    };
                } else if (columnIndex === 2) {
                    // 第三列的合并方法
                    const row3 = this.thirdArr[rowIndex];
                    const col3 = row3 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
                    return {
                        rowspan: row3,
                        colspan: col3,
                    };
                }
            },

在getDataList之后，计算合并数据信息：

integratedData(listData) {
               this.firstArr = [];
                this.firstPos = 0;
                this.secondArr = [];
                this.secondPos = 0;
                this.thirdArr = [];
                this.thirdPos = 0;

                for (let i = 0; i < listData.length; i += 1) {
                    if (i === 0) {
                        // 第一行必须存在
                        this.firstArr.push(1);
                        this.firstPos = 0;
                        this.secondArr.push(1);
                        this.secondPos = 0;
                        this.thirdArr.push(1);
                        this.thirdPos = 0;
                    } else {
                        // 判断当前元素与上一个元素是否相同
                        // 第一列
　　　　　　　　　　　　　　//  pageFieldsNames里存放的是第一列的field_name，第二列的field_name ...

                        if (listData[i][this.pageFieldsNames[0]] === listData[i - 1][this.pageFieldsNames[0]]) {
                            this.firstArr[this.firstPos] += 1;
                            this.firstArr.push(0);
                        } else {
                            this.firstArr.push(1);
                            this.firstPos = i;
                        }
                        // 第二列
                        if (listData[i][this.pageFieldsNames[0]] === listData[i - 1][this.pageFieldsNames[0]]&&listData[i][this.pageFieldsNames[1]] === listData[i - 1][this.pageFieldsNames[1]]) {
                            this.secondArr[this.secondPos] += 1;
                            this.secondArr.push(0);
                        } else {
                            this.secondArr.push(1);
                            this.secondPos = i;
                        }
                        // 第三列
                        if (listData[i][this.pageFieldsNames[0]] === listData[i - 1][this.pageFieldsNames[0]]&&listData[i][this.pageFieldsNames[1]] === listData[i - 1][this.pageFieldsNames[1]]&&listData[i][this.pageFieldsNames[2]] === listData[i - 1][this.pageFieldsNames[2]]) {
                            this.thirdArr[this.thirdPos] += 1;
                            this.thirdArr.push(0);
                        } else {
                            this.thirdArr.push(1);
                            this.thirdPos = i;
                        }
                    }
                }
            }

 

参考文章：https://dandelioncloud.cn/article/details/1508644631989526529