el-table合并列

ElemetnUI合并列

设置数据

tableData: [
    {
        "group": "AAA",
        "prop1": "单元格-1-3",
        "prop2": "单元格-1-4",
        "prop3": "单元格-1-5"
    },
    {
        "group": "AAA",
        "prop1": "单元格-2-3",
        "prop2": "单元格-2-4",
        "prop3": "单元格-2-5"
    },
    {
        "group": "AAA",
        "prop1": "单元格-3-3",
        "prop2": "单元格-3-4",
        "prop3": "单元格-3-5"
    },
    {
        "group": "BBB",
        "prop1": "单元格-4-3",
        "prop2": "单元格-4-4",
        "prop3": "单元格-4-5"
    },
    {
        "group": "BBB",
        "prop1": "单元格-5-3",
        "prop2": "单元格-5-4",
        "prop3": "单元格-5-5"
    },
    {
        "group": "BBB",
        "prop1": "单元格-6-3",
        "prop2": "单元格-6-4",
        "prop3": "单元格-6-5"
    },
    {
        "group": "CCC",
        "prop1": "单元格-7-3",
        "prop2": "单元格-7-4",
        "prop3": "单元格-7-5"
    },
    {
        "group": "CCC",
        "prop1": "单元格-8-3",
        "prop2": "单元格-8-4",
        "prop3": "单元格-8-5"
    },
    {
        "group": "CCC",
        "prop1": "单元格-9-3",
        "prop2": "单元格-9-4",
        "prop3": "单元格-9-5"
    },
    {
        "group": "CCC",
        "prop1": "单元格-10-3",
        "prop2": "单元格-10-4",
        "prop3": "单元格-10-5"
    }
],
mergeColName: 'group', // 要合并的列名称
mergeColData: [], // 合并的列数据

设置合并列数据

setMergeColData() {
    let tempColName = ""; // 临时列名
    this.tableData.map(item => {
        if (tempColName !== item[this.mergeColName]) {
            tempColName = item[this.mergeColName];
            this.mergeColData.push({
                name: item[this.mergeColName],
                rowspan: 1
            });
        } else {
            let current = this.mergeColData.find(
                v => v.name === item[this.mergeColName]
            );
            current.rowspan += 1;
            this.mergeColData.push({
                name: item[this.mergeColName],
                rowspan: 0
            });
        }
    });
    console.log(JSON.stringify(this.mergeColData, null, 4));
},

span-method方法

handleSpanMethod(item) {
    if (item.column.property === this.mergeColName) {
        return {
            rowspan: this.mergeColData[item.rowIndex].rowspan, 
            colspan: 1
        };
    }
}

rowspan
设置当前行的合并数，合并长度从开始rowIndex设置，剩余要设置为0

生成的mergeColData

[
    {
        "name": "AAA",
        "rowspan": 3
    },
    {
        "name": "AAA",
        "rowspan": 0
    },
    {
        "name": "AAA",
        "rowspan": 0
    },
    {
        "name": "BBB",
        "rowspan": 3
    },
    {
        "name": "BBB",
        "rowspan": 0
    },
    {
        "name": "BBB",
        "rowspan": 0
    },
    {
        "name": "CCC",
        "rowspan": 4
    },
    {
        "name": "CCC",
        "rowspan": 0
    },
    {
        "name": "CCC",
        "rowspan": 0
    },
    {
        "name": "CCC",
        "rowspan": 0
    }
]