vue+html 動態合並單元格

總結
用rowIndex, columnIndex 找到要合並的開始單元格
return {rowspan: 1,colspan: 1 } 表示表格不變
return {rowspan: 2,colspan: 1 } 表示表格向下合並一個單元格
return {rowspan: 1,colspan: 2 } 表示表格向右合並一個單元格
return {rowspan: 0,colspan: 0 } 表示刪除此單元格

 

    /** 數據處理-合並單元格 */
    /** list: 后台傳回的數據 */
    combineCell(list) {
      for (var field in list[0]) {  // 獲取數據中的字段，也就是table中的column，只需要取其中一條記錄的就可以了
        // 定義數據list的index
        var k = 0;
        while (k < list.length) {
          // 增加字段-用於統計有多少重復值
          list[k][field + 'span'] = 1;
          // 增加字段-用於控制顯示與隱藏
          list[k][field + 'dis'] = '';
          for (var i = k + 1; i <= list.length - 1; i++) {
            // 判斷第k條數據的field字段，與下一條是否重復
            if (list[k][field] === list[i][field] && list[k][field] !== '') {
              // 如果重復，第k條數據的字段統計+1
              list[k][field + 'span']++;
              // 設置為顯示
              list[k][field + 'dis'] = '';
              // 重復的記錄，則設置為1，表示不跨行
              list[i][field + 'span'] = 1;
              // 並且該字段設置為隱藏
              list[i][field + 'dis'] = 'none';
            } else {
              break;
            }
          }
          // 跳轉到第i條數據的索引
          k = i;
        }
      }
      console.log(list);
      this.ccxx = _.cloneDeep(list);
    },

 
          
                  getinfo(id){ 
           
          
                     httpModuleApi.info(id).then(res => { 
           
          
                      if(res.code == 1){ 
           
          
                        this.title = res.data.riskControlAssessName 
           
          
                        let data = res.data; 
           
          
                        this.originalData = data; 
           
          
                        let orderTaskList = data; 
           
          
                        // if(res.data.updatedAt){ 
           
          
                        //    this.checkDate = "排查時間：          "+styleFunc.dateFormat1(res.data.updatedAt); 
           
          
                        // } 
           
          
 
          
                        let  myMergeKeys = ['aname', 'bname'];//自定義合並項 
           
          
 
          
                        for(let m=0;m<orderTaskList.length;m++){ 
           
          
                            let item = orderTaskList[m]; 
           
          
 
          
                            let itemsList = orderTaskList; 
           
          
                            // item.deductPoint="";//初始值 
           
          
                            // item.deductReason="";//初始值 
           
          
                            item.myId = item.id; 
           
          
                            item.aname = item.aName +"("+item.aScore+"分)"; 
           
          
                            item.bname = item.bName +"("+item.bScore+"分)"; 
           
          
 
          
                            for (var gg in myMergeKeys) {//需要合並的項目 
           
          
                                var field = myMergeKeys[gg]; 
           
          
                                // 定義數據list的index 
           
          
                                var k = 0; 
           
          
                                while (k < itemsList.length) { 
           
          
                                  // 增加字段-用於統計有多少重復值 
           
          
                                  itemsList[k][field + 'span'] = 1; 
           
          
                                  // 增加字段-用於控制顯示與隱藏 
           
          
                                  itemsList[k][field + 'dis'] = ''; 
           
          
                                  for (var i = k + 1; i <= itemsList.length - 1; i++) { 
           
          
                                    // 判斷第k條數據的field字段，與下一條是否重復 
           
          
                                    if (itemsList[k][field] === itemsList[i][field] && itemsList[k][field] !== '') { 
           
          
                                      // 如果重復，第k條數據的字段統計+1 
           
          
                                      itemsList[k][field + 'span']++; 
           
          
                                      // 設置為顯示 
           
          
                                      itemsList[k][field + 'dis'] = ''; 
           
          
                                      // 重復的記錄，則設置為1，表示不跨行 
           
          
                                      itemsList[i][field + 'span'] = 1; 
           
          
                                      // 並且該字段設置為隱藏 
           
          
                                      itemsList[i][field + 'dis'] = 'none'; 
           
          
                                    } else { 
           
          
                                      break; 
           
          
                                    } 
           
          
                                  } 
           
          
                                  // 跳轉到第i條數據的索引 
           
          
                                  k = i; 
           
          
                                } 
           
          
                            } 
           
          
                        } 
           
          
                        this.tableData = orderTaskList; 
           
          
                        // this.riskControlMeasuresList = res.data; 
           
          
                        // this.getSpanArr(this.tableData, this.mergeKeys); 
           
          
                      } 
           
          
                    }).catch(err => {}); 
           
          
                  }, 
           
         

 

 

https://blog.csdn.net/Ajax_mt/article/details/88685425