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://www.dianjilingqu.com/469821.html