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);
    },

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

标签：rowspan,return,colspan,单元格,list,html,field,vue
来源： https://www.cnblogs.com/porter/p/16091684.html