element table合并行或列 span-method

首先来看下官网上如何写的

显然这种固定写法并不能满足我们日常开发中的需求

再请求到后台数据之后如果数据不是按你想合并字段排序的话，这时候需要多做一步排序，把需要合并的那个字段分组显示，这里就不过多赘述了（这个分组一般后台都能做）。

接下来就讲一下如何操作

首先再data里定义两个变量

  data () {
    return {
      merge: [], // 存放需要合并的行
      subscript: '' // 需要合并行下标
    }
  },

之后再调用接口获取到数据之后运行获取merge和subscript的方法

    getMergeSubSceipt (data) {
      if (data) {
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            this.merge.push(1)
            this.subscript = 0
          } else {
            // 判断当前元素与上一个元素是否相同
            // 根据相同id进行合并,根据需要可进行修改
            if (data[i].team === data[i - 1].team) {
              this.merge[this.subscript] += 1
              this.merge.push(0)
            } else {
              this.merge.push(1)
              this.subscript = i
            }
          }
        }
      }
    },

到这就已经把数据处理完了接下来就是处理el-table的合并方法

    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.merge[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }