iview表格行/列合并

iview在4.0版本之后可谓是脱胎换骨，并且更名为view-ui，在4.0后表格增加了拖拽调整列宽，行/列合并，合计等功能，此处还是有一些坑点记录下来方便以后遇到能够快速解决

方法描述

span-method指定合并行或列的算法函数，该方法接收四个对象作为参数，这个官网描述的很清楚，但是返回值这里就有些让人费解了，在这贴出官网原话：该函数可以返回一个包含两个元素的数组，第一个元素代表 rowspan，第二个元素代表 colspan。 也可以返回一个键名为 rowspan 和 colspan 的对象。

rowspan和colspan是啥啊？这让人感到困惑，其实看完它的例子（踩了几个坑）后就会发现这个方法返回值其实就是单元格占据的行和列

基本思路

我们可以用一个二维数组来实现一个与表格内容一一对应的layout，根据当前的参数rowIndex, columnIndex返回layout[rowIndex][columnIndex]，表示表格内容的排列方式

举个例子

      [[
        [1,1], [1,1], [1,1]
      ],[
        [1,1], [1,1], [1,1]
      ],[
        [1,1], [1,1], [1,1]
      ]]
      //表示一个三行三列不合并的表格

再举一个例子

      [[
        [2,1], [1,1], [1,1]
      ],[
        [0,0], [1,1], [1,1]
      ],[
        [1,1], [1,1], [1,1]
      ]]
      //表示三行三列第一列合并两个单元格的表格

其实就是数组中的值为[1,1]代表默认不合并，[0,0]代表不显示，如果有人说[1,0]或者[0,1]这样的怎么办？在view-ui中，这种情况也是按照[0,0]来处理的，知道这些我们就可以实现一个合并数据中重复出现的单元格的表格了

实现

    handleSpan({ row, column, rowIndex, columnIndex }) {
      return this.layoutArr[rowIndex][columnIndex]
    },
  getLayout() {
      const arr = []
      //得到一个普通布局数组,即正常排列的表格
      this.tableData.forEach(item=> {
        arr.push([])
        Object.keys(item).forEach(()=> {
          arr[arr.length - 1].push([1,1])
        })
      })

      for(let i = 0; i < arr.length; i++) {
        for(let j = 0; j < arr.length; j++) {
          const target = arr[i][j]
          if(target[0] * target[1] !== 0) {
            //合并列
            for(let k = i + 1; k < arr.length; k++) {
              if(this.tableData[i][j] === this.tableData[k][j]) {
                target[0] += 1
                arr[k][j] = [0,0]
              } else {
                break
              }
            }

            //合并行
            for(let k = j + 1; k < arr.length; k++) {
              if(this.tableData[i][j] === this.tableData[i][k]) {
                target[1] += 1
                arr[k][i] = [0,0]
              } else {
                break
              }
            }
          }
        }
      }
      this.layoutArr = arr
    }

参考：https://blog.csdn.net/weixin_43824116/article/details/105275869?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-8.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-8.nonecase