一、框架名称&版本号
框架：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（暗藏这些单元格）
以上，欢送斧正探讨～