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