iview table 合并前三列

先上效果图

需求:合并客户、区域、操作系统三列 (要点前后端需统一好返参顺序 合并内容需相邻 否则无法做循环判断)

实现
1.目前iview 官网上有合并列的例子 大家可以先去自行研究 这里就不再做过多的讲解 以效果图为例
客户列:return [10,1] (10行1列) 其余 return [0,0] (表示合并0行0列，即这是被合并的单元格)
区域列:return [8,1] 、return [2,1] 其余return [0,0]
操作系统:return [2,1] 、return [1,1]、return [2,1]、return [3,1]、return [2,1] 其余 return [0,0]

handleSpan ({ row, column, rowIndex, columnIndex }) {
  // 客户列
    if (columnIndex == 0){
        let x = row.companyNameNum == 0 ? 0:row.companyNameNum
        let y = row.companyNameNum == 0 ? 0:1
        return [x, y]

    }
    // 区域列
    if (columnIndex == 1) {
        let x = row.regionNum == 0 ? 0:row.regionNum
        let y = row.regionNum == 0 ? 0:1
        return [x, y]
    }
    // 操作系统列
    if (columnIndex == 2) {
        let x = row.osNum == 0 ? 0:row.osNum
        let y = row.osNum == 0 ? 0:1
        return [x, y]
    }
}

2.该方法是处理后端返回的数据 处理顺序依次为 “客户、区域、操作系统”

assembleData(data){
   // 客户
   //数据处理算法，处理后，便于单元格的合并
   for(var i=0; i<data.length;i++){
       if(data[i].companyNameAlready!==1){
           if(data[i+1]){
               data[i].companyNameNum=1
               for(var j =i+1 ;j<data.length;j++){
                   if(data[i].companyName === data[j].companyName) {
                       data[i].companyNameNum++
                       data[j].companyNameNum = 0
                       data[j].companyNameAlready = 1 
                   }else{
                       break;
                   }
               }
           }
       }
   }      
   //区域
   for(var k=0; k<data.length;k++){
      //  > 1 表示companyName 有合并  需要在companyName合并的row中 再合并region
       if(data[k].companyNameNum>1){
           for(var m = 0;  m < data[k].companyNameNum ; m++) {
               if(data[k+m].regionAlready !== 1) {
                   if(m+1 < data[k].companyNameNum){
                       data[k+m].regionNum = 1
                       for(var n =m+1;n<data[k].companyNameNum;n++){
                           if(data[k+m].region === data[k+n].region) {
                               data[k+m].regionNum ++ 
                               data[k+n].regionNum = 0
                               data[k+n].regionAlready = 1
                           }else{
                               break
                           }
                       }
                   }
               }
           }
       }
   }
   //操作系统
   for(var l=0; l<data.length;l++){
       if(data[l].regionNum>1){
           for(var p = 0;  p < data[l].regionNum ; p++) {
               if(data[l+p].osAlready !== 1) {
                   if(p+1 < data[l].regionNum){
                       data[l+p].osNum = 1
                       for(var z =p+1;z<data[l].regionNum;z++){
                           if(data[l+p].os === data[l+z].os) {
                               data[l+p].osNum ++ 
                               data[l+z].osNum = 0
                               data[l+z].osAlready = 1
                           }else{
                               break
                           }
                       }
                   }
               }
           }
       }
   }
   this.tableData = data
}

特此鸣谢
1.https://blog.csdn.net/wsjzzcbq/article/details/106079081
2.https://blog.csdn.net/wakaka112233/article/details/107210611