vue elementui el-table合并单元格

合并单元格其实很常见，按理说没啥好分享的，但是需求不同合并单元格也就分阶了，今天分享的不固定列的合并单元格

 需求：表格中的表头变量分为分类 和 值域 ，需求要求分类变量进行合并单元格（注意：分类变量是不确定的，根据接口回来数据进行判断 变量是分类还是值域哦，说的可能不明白，但是代码很清晰），上代码

export default {
    data() {
        return:{
            dataArr:[],//分类变量数组,需要从接口返回数据里去提取
            spanArr:[],
            data:[],//table数据
        }
    },
    methods: {
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
          for (var j = 0; j < this.dataArr.length; j++) {
            if (columnIndex == j) {
              const rows = this.spanArr[j][rowIndex];
              const cols = rows > 0 ? 1 : 0;
              return {
                rowspan: rows,
                colspan: cols
              };
            }
          }
        },
        setSpanArr() {
          for (var j = 0; j < this.dataArr.length; j++) {
            var arr = []
            var pos = 0
            for (var i = 0; i < this.data.length; i++) {
              if (this.data[i][this.dataArr[j]['indexCode']]) {
                if (i === 0) {
                    arr.push(1);
                    pos = 0;
                } else {
                  // 判断当前元素与上一个元素是否相同
                  if (
                    this.data[i][this.dataArr[j]['indexCode']] 
                    === 
                    this.data[i - 1][this.dataArr[j]['indexCode']]) 
                  {
                    arr[pos] += 1;
                    arr.push(0);
                  } else {
                    arr.push(1);
                    pos = i;
                  }
                }
              } else {
                arr.push(1);
                pos = i;
              }
              this.spanArr[j] = arr
            }
          }

        },
        getData() {//获取接口回来的数据
            //请求接口 获取dataArr 然后调用setSpanArr方法
            this.setSpanArr();
        }
    }
}

spanArr 输出结果 spanArr = [ [2,0,0,1],[1,2,0,0]]
以上方法有个弊端就是分类变量在前面，还是那句话，兄弟姐妹们有更好的方法请留言！