1. 需求
需要将从后台获取的数据，在前端渲染时，如果同一列相邻的数据相同，则合并成一个单元格。
即：
需要将上图两个单元格合并，成果图如下
2. 问题
本项目使用的是iview组件，iview组件也提供了单元格合并的接口handleSpan,单有关需求的算法需要自己实现。
2.1 先介绍一下iview官方例子
看一下handleSpan 的用法
methods: {handleSpan ({row, column, rowIndex, columnIndex }) {if (rowIndex === 0 && columnIndex === 0) {return [1, 2];} else if (rowIndex === 0 && columnIndex === 1) {return [0, 0];}if (rowIndex === 2 && columnIndex === 0) {return {rowspan: 2,colspan: 1};} else if (rowIndex === 3 && columnIndex === 0) {return {rowspan: 0,colspan: 0};}}}
先看代码段：
if (rowIndex === 0 && columnIndex === 0) {return [1, 2];} else if (rowIndex === 0 && columnIndex === 1) {return [0, 0];}
rowIndex === 0 && columnIndex === 0是指第一行第一列（index从零开始），即左上角第一个单元格，return [1, 2];return [1,2] 是表示，合并一行两列，即从左上角第一个单元格出发，找一行两列进行合并。
rowIndex === 0 && columnIndex === 1是第一行第二列单元格，return [0, 0];是被合并单元格的标志，所有被合并的单元格都需要返回 [0,0]。
注意：合并和被合并的区别，返回值不是[0,0]的，其内容显示在合并后的单元格中。返回值是[0,0]的是被合并的单元格，内容相当于删除
上述便是handleSpan 的基本用法
2.2 动态合并问题
i-table组件虽然留有合并的接口handleSpan ，但单元格合并的逻辑和算法都需要自己解决。
网上也有很多大佬分享的算法，但博主亲身测试一下，不太满足需求。
因为项目需求是：
对于个别列，需要将相邻相同的数据单元格进行合并。
网上的算法，很多都是没有相邻这个条件，并且过于复杂！
3. 解决办法
先上代码：
handleSpan ({row, column, rowIndex, columnIndex }) {//合并第2列if (columnIndex == 1) {//计算合并的行数列数let x = row.num == 0 ? 0:row.numlet y = row.num == 0 ? 0:1console.log(x,y)return [x, y]}},assembleData(data){for(var i=0; i<data.length;i++){if(data[i].already!==1){if(data[i+1]){data[i].num=1for(var a =i+1 ;a<data.length;a++){if(data[i].name === data[a].name) {data[i].num++data[a].num = 0data[a].already = 1 }else{break}}}}}//将整理后的数据交给表格渲染this.data5 = dataconsole.log("data")console.log(this.data5)},
效果
4. 现存问题：
如果用这个算法去实现，多列合并的话，就可能出现这种情况
需求希望左侧为主，图中的地方不应该出现合并，关于此问题，以后再追加！
5. 问题解决
直接上代码：
handleSpan ({row, column, rowIndex, columnIndex }) {//合并第二列,这里columnIndex==1 根据具体业务要在前端写死if (columnIndex == 1) {console.log()//计算合并的行数列数let x = row.num == 0 ? 0:row.numlet y = row.num == 0 ? 0:1console.log(x,y)return [x, y]}if (columnIndex == 2) {//计算合并的行数列数let x = row.agenum == 0 ? 0:row.agenumlet y = row.agenum == 0 ? 0:1console.log(x,y)return [x, y]}},assembleData(data){// 数据处理算法，处理后，便于单元格的合并for(var i=0; i<data.length;i++){if(data[i].already!==1){if(data[i+1]){data[i].num=1for(var a =i+1 ;a<data.length-i;a++){if(data[i].name === data[a].name) {data[i].num++data[a].num = 0data[a].already = 1 }else{break}}}}}for(var j=0; j<data.length;j++){// > 1 表示name 有合并 需要在name合并的row中 再合并ageif(data[j].num>1){for(var k = 0; k < data[j].num ; k++) {if(data[j+k].agealready !== 1) {if(k+1 < data[j].num){data[j+k].agenum = 1for(var b =k+1;b<data[j].num;b++){if(data[j+k].age === data[j+b].age) {data[j+k].agenum ++ data[j+b].agenum = 0data[j+b].agealready = 1}else{break}}console.log(888888)console.log(data[j+k].agenum)}}}}}//将整理后的数据交给表格渲染this.data5 = dataconsole.log(this.data5)},
