vue+html 动态合并单元格

前言

因为业务需求，要把某些字段的相同数据合并在同一单元格，好吧，这又是一次烧脑的逻辑游戏，废话不多说，看招！

最终实现的效果图

思路

思路一：
对后台传回的数据进行毁尸灭迹的修改，重新创建一个data对象，后台传回的数据依次赋值，使这个data的结构是table可渲染的，好吧，这个是极为糟糕的主意，小编成功的写了个bug

思路二：
对于后台传回的数据，一般都是一个数组，如图：

我们其实要做的，就是统计要合并的字段，找出有多少个重复的值。这是步骤一。

步骤二：统计了数据之后，我们要控制这些数据的显示与隐藏，以达到只显示一个重复值。
在原生table中，实现合并有两种：跨行rowspan、跨列colspan。由于这里是进行跨行合并，所以直接采用rowpan，但是，这个只是针对其中一条记录，我们还要控制其他记录的该重复字段不显示，这才是想要的结果。那么原生HTML中，显示与隐藏的控制，有两种：display与visible，这两者区别，不再赘述。

代码展示

ok，思路有了，那么就用代码实现。
step 1：统计数据

	/** 数据处理-合并单元格 */
    /** 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);
    },

数据处理后的结果：

step 2：tr 动态循环数据

tr(v-for="item in ccxx")
 td(:rowspan="item.cclxspan" :style="{ display: item.cclxdis }") {{ item.cclx }}
 td(:rowspan="item.lsspan" :style="{ display: item.lsdis }") {{ item.ls }}
 td(:rowspan="item.ysspan" :style="{ display: item.ysdis }") {{ item.ys }}
 td {{ item.lhjgd }}
 td {{ item.lhjkd }}
 td {{ item.lhjpf }}
 td {{ item.ps }}
 td {{ item.bz }}
 td {{ item.blgd }}
 td {{ item.blkd }}
 td {{ item.blpf }}

rowspan用于跨行合并，display用于控制显示与隐藏。到此，这个功能也就基本实现了。之前看到其他博主用的是 :class={ hidden: item.dis } ，使用true or false来控制显示，但是小编这里试了试，发现没有效果，所以不了了之，有同行发现能用，还请留下宝贵的评论(＾－＾)V