需求：

需要将从后台获取的数据，在前端渲染时，如果同一列相邻的数据相同，则合并成一个单元格。

方法1：（缺点同方法2）

后端返回对应的标识，前端只需要根据这些标识做处理。

返回数据

以下面后端返回数据截图为例： 返回mergeNum字段，为4说明要合并4行，为0说明当前是已被合并了的
image.png

代码：

  1. <Table id="tab" border :columns="columns1" :data="dataTable" :span-method="handleSpan"></Table>
  3. handleSpan({ row, column, rowIndex, columnIndex }){
  4.   if (row.evaluationIndexDetail.mergeNum && columnIndex === 0) { //根据后端返回的字段处理
  5.       return {
  6.         rowspan: row.evaluationIndexDetail.mergeNum,
  7.         colspan: 1
  8.       };
  9.     } else if (columnIndex === 0) {
  10.       return {
  11.       rowspan: 0,
  12.       colspan: 0
  13.     };
  14.   }
  15.   if(row.evaluationIndexDetail.isFetch == 'Y'){ //直接取值,是固定的，所以就没让后端处理
  16.     if (columnIndex === 2) {
  17.       return {
  18.           rowspan: 1,
  19.           colspan: 2
  20.         };
  21.      } else if (columnIndex === 3) {
  22.         return {
  23.         rowspan: 0,
  24.         colspan: 0 
  25.           };
  26.       }
  27.   }
  28. }

效果

![image.png](https://cdn.nlark.com/yuque/0/2020/png/391597/1608108310401-7b4b66c4-f0c8-4339-85c6-54b1f119891d.png#align=left&display=inline&height=467&margin=%5Bobject%20Object%5D&name=image.png&originHeight=467&originWidth=1088&size=81073&status=done&style=none&width=1088)

方法2：(缺点：不是连一起的相同数据多处合并有问题)

因为当前需求是同一列的相同数据就合并，所以在拿到后端的数据后先处理下(其实就是方法1中的标识字段改成由前端处理)

返回数据：

不需要关注返回数据

代码：

  1. assembleData(data){
  2.   for(let i=0;i<data.length;i++){
  3.     if(data[i].already!==1){
  4.       if(data[i+1]){
  5.         data[i].num=1
  6.         for(var a =i+1 ;a<data.length;a++){
  7.           //判断第一个和相邻的第二个数据是否相等
  8.           if(data[i].evaluationIndexDetail.contentType === data[a].evaluationIndexDetail.contentType) {
  9.             data[i].num++
  10.             data[a].num = 0 
  11.             data[a].already = 1  //加标识，已经处理过的就跳过不再重复处理
  12.           }else{
  13.             break
  14.           }
  15.         }
  16.       }
  17.     }
  18.   }
  19.   return data
  20. },

效果

同方法1，就不截图了

缺点

不能满足以下需求：
image.png

方法3：(解决方法2的缺点)

返回数据：

不需要关注返回数据

代码：

  1. /*合并单元格
  2.   data:数据列表
  3.   contentType:将要合并的对比字段
  4.   */
  5.   getMergeNum (data, contentType){
  6.     //页面展示的数据，不一定是全部的数据，所以每次都清空之前存储的 保证遍历的数据是最新的数据。以免造成数据渲染混乱
  7.     let spanArr = []
  8.     let pos = 0
  9.     //遍历数据
  10.     data.forEach((item, index) => {
  11.       //判断是否是第一项
  12.       if (index === 0) {
  13.         spanArr.push(1)
  14.         pos = 0
  15.       } else {
  16.         //不是第一项时，就根据标识去存储
  17.         if (data[index][contentType] === data[index-1][contentType]) {
  18.           // 查找到符合条件的数据时每次要把之前存储的数据+1
  19.           spanArr[pos] += 1
  20.           spanArr.push(0)
  21.         } else {
  22.           // 没有符合的数据时，要记住当前的index
  23.           spanArr.push(1)
  24.           pos = index
  25.         }
  26.       }
  27.      })
  28.     console.log(spanArr, pos)
  29.     return spanArr  
  30.   }

效果：

image.png

参考：这里,还有这里