iview合并表格采坑

iview没有拆分表格，只有合并的方法

文档链接如下

可以看到文档中说的很模糊 只是给了一个span-method的方法

看一下最终实现的效果

先说思路

根据iview文档可以知道 表格需要的数据是需要最细的粒度来作为一行（列）

然后通过:span-methods去计算有哪些行（列） 需要隐藏

哪些 行（列） 需要占多少行（列）

所以我们需要分以下几个步骤做

1. 将数据拆成最细的粒度
2. 将需要占几行的数量放在拍平的数据中（在第三步中就可以直接拿到合并几行了）
3. 写span-method算法 来计算哪些需要占几行

第一步 将数据拆成最细的粒度 + 第二步 将每个层级的list保留（或者保留list的length）

这一步将数据处理好后就可以进行第三步了

第三步 写span-method算法

该方法参数为 4 个对象：

• row: 当前行
• column: 当前列
• rowIndex: 当前行索引
• columnIndex: 当前列索引

该函数可以返回一个包含两个元素的数组，第一个元素代表 rowspan，第二个元素代表 colspan。 也可以返回一个键名为 rowspan 和 colspan 的对象。

• rowspan 代表占几行
• colspan 代表占几列

所以 return [0,0] 就是隐藏

handleSpan({ row, column, rowIndex, columnIndex }) {
      const value = this.repertoryList;
      // 比较前一行和当前行是否相等
      const diffGoodsName = _.isEqual(value[rowIndex - 1].goodsName, row.goodsName);
      const diffUsages = _.isEqual(value[rowIndex - 1].usages, row.usages);
      const diffSourceSn = _.isEqual(
        value[rowIndex - 1].sourceSn,
        row.sourceSn
      );
      // 判断当前是第几列
      if (columnIndex === 0) {
        // 第0列 所以判断当前行与前一行是否相等
        // 不相等 返回占几行，1列
        if (!diffGoodsName) {
          return [row.list.length, 1];
        } else {
          return [0, 0];
        }
      }
      
      // 第1列 展示的是usages 判断当前行的name和usages都一样的话就隐藏
      if (columnIndex === 1) {
        if (!(diffGoodsName && diffUsages)) {
          return [row.blist.length, 1];
        } else {
          return [0, 0];
        }
      }
      
      // 第2列 展示的是SourceSn 判断当前行的name和usages和sourceSn都一样的话就隐藏
      if (columnIndex === 2) {
        if (!(diffGoodsName && diffUsages && diffSourceSn)) {
          return [row.clist.length, 1];
        } else {
          return [0, 0];
        }
      }
    },