vue element-ui table二维数组表格合并列

效果图

实现思路：先判断每一项的state和innerList是否存在，state==“0”或innerList不存在，则只有一条数据，否则有多条。先合并数据，再按规则合并列。

<el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        style="width: 100%"
        :header-cell-style="{background:'#0e90f2',color:'#ffffff',textAlign:'center',height:40 + 'px'}"
      >

  initData() {
      let data = this.tableData;
      let arr = []; //存放格式后的数据
      let rowspan = []; //存放数组每行的 合并row 数据
      data.forEach(item => {
        if (item.innerList.length > 0&&item.status=="1") {
            for (let i = 0; i < item.innerList.length; i++) {
              let params = []
              params = {...item, ...item.innerList[i]}; //合并数据item与item.innerList[i]的数据，构成新的行数据
              params.combineNum = item.innerList.length;    //获取合并的 行数（row -> 取item的子数组长度）
              params.blId = item.id
              delete params.innerList; //删除innerList属性; item属性中存在innerList，我们又获取了 item.innerList[i] 数据，所以此属性没用了删掉
              arr.push(params); //存储格式好的数据
              // 生成合并信息的数组 [3, 0, 0, 2, 0, 4, 0, 0, 0] 其中的0代表隐藏
              if (i == 0) {
                rowspan.push(item.innerList.length);
                // console.log(1)
              } else {
                rowspan.push(0);
                // console.log(3)
              }
            }
        } else {
          let params = item;
          params.combineNum = 1;
          params.blId = item.id
          // console.log("delete params->", params); //通过循环获取到所有数据列表
          arr.push(params); //存储格式好的数据
          rowspan.push(1);
          // console.log(2)
        }
      });
      this.tableData = arr; //处理好格式的 arr 进行赋值
      this.rowspan = rowspan;
    },

    //单元格合并
    //行，列，行下标，列下标( 控制要合并的列 )
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
        //根据状态判断是否要合并列
      if(this.tableData[rowIndex].status=='0'){
        const _row = 1;
        const _col = columnIndex==3?9:([4,5,6,7,8,9,10,11].includes(columnIndex)?0:1);
        return {
          rowspan: _row, //合并的行数
          colspan: _col //合并的列数，设为０则直接不显示
        };
      }else if ([0, 1, 2, 3, 4, 5, 6, 7, 12].includes(columnIndex)) {
        const _row = this.rowspan[rowIndex];
        const _col = _row > 0 ? 1 : 0; // 如果这一行隐藏了，这列也隐藏
        return {
          rowspan: _row, //合并的行数
          colspan: _col //合并的列数，设为０则直接不显示
        };
        //根据起运港判断是否要合并列
      }
    },