html表格制作7列合并为2列最后合并为1列,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

}

]