element ui中动态合并单元格_关于前端:基于elementui的合并单元格动态数据合并

一、框架名称&版本号

框架：element-ui

版本号：2.3.9或更高

传送门：

elment-ui页签：https://element.faas.ele.me/#…

demo地址：https://github.com/haryzxw/zx…

二、性能形容

实现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(暗藏这些单元格)

以上，欢送斧正探讨～