共计 1326 个字符，预计需要花费 4 分钟才能阅读完成。
一、框架名称 & 版本号
框架：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（暗藏这些单元格）
以上，欢送斧正探讨～
正文完
