按需加载Vue Element UI表格合并

根据客户需求按照原型图合并Element UI的进行表格的上下合并
效果如下

1.表格绑定单元格合并方法
使用Elemen表格提供的span-method绑定到我们需要合并的表格中


2.定义合并单元格合并方法
在data里定义接收的数组,然后根据方法判断数据有相同属性值确定表格进行合并.将数值添加到数组中

tableChange(tableData, spanName) {
      let contactDot = 0
      tableData.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1) 
        } else {
          if (tableData[index][spanName] === tableData[index - 1][spanName]) {
            this.spanArr[contactDot] += 1
            this.spanArr.push(0)
          } else {
            contactDot = index
            this.spanArr.push(1)
          }
        }
      })
    }

3.使用合并方法
后台返回数据后通过自定义方法获取数据,以及需要合并的属性

4.调用表格绑定单元格合并方法span-method
根据columnIndex 判断对那一行进行合并

newSpan({ row, column, rowIndex, columnIndex }) {
      if ([1, 10].includes(columnIndex)) {
        if (this.spanArr[rowIndex]) {
          return {
            rowspan: this.spanArr[rowIndex],
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }