element ui中动态合并单元格_基于element-ui的合并单元格（动态数据合并）

一、框架名称&版本号

框架：element-ui

版本号：2.3.9或更高

传送门：

二、功能描述

实现table的合并单元格功能，表格横纵向的合并

三、核心代码及注释

基础数据示例：spanArr:[ // 合并坐标，row为行索引、col为列索引、span为行、列的合并数量；后端返回，或前端生成也可

{

row: 1,

col: 1,

span: [6,1]

},

...

,

],

mergeData: [ // 合并涉及的单元格对象数组

{

row: 1, // 合并涉及的单元格的行索引

column: 2, // 合并涉及的单元格的列索引

rowspan: 1, // 纵向合并的行数

colspan: 2 // 横向合并的列数

}

]}

核心代码块：getSpanArr(arr){ // 获得合并单元格对象数组，arr为表格行数据

arr.map((value, index) => { // 遍历表格数据

this.spanArr.map((item, index1) => { // 遍历后台返回的合并坐标数组

if(index + 1 == item.row){ // 判断当前行与坐标数组行匹配

for(var i = 0; i < item.span[0]; i++){ // 遍历合并数量数组的行数

for(var j = 0; j < item.span[1]; j++){ // 遍历合并数量数组的列数

if(i == 0 && j == 0){ // 以当前单元格作为合并起点，横纵向延伸

this.mergeData.push( // 将单元格合并对象加入队列

{

row: item.row, // 合并的单元格起始坐标的行索引

column: item.column, // 合并的单元格起始坐标的列索引

rowspan: item.span[0], // 合并行数

colspan: item.span[1] // 合并列数

}

)

}

else{

this.mergeData.push( // 将被合并的单元格的合并行列数置为0，表示不显示该单元格

{

row: item.row + i, // 被合并单元格的行索引(除起始单元格)

column: item.column + j, // 被合并单元格的列索引(除起始单元格)

rowspan: 0, // 不显示该单元格

colspan: 0 // 不显示该单元格

}

)

}

}

}

}

})

})

},

objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 合并方法

for (let i = 0; i < this.mergeData.length; i++) { // 遍历合并单元格的对象数组

var value = this.mergeData[i]

if(value.row == rowIndex + 1 && value.column == columnIndex){ // 找到需要设置rowspan、colspan的元素

return {

rowspan: value.rowspan,

colspan: value.colspan

}

}

}

},

四、总结

注意被合并的单元格的起始单元格设置对应的行列合并即可，其他被合并的单元格应该将行列设置为0(隐藏这些单元格)

以上，欢迎指正讨论～