elementui el-table的span-method合并行和处理后台数据后合并行

先附上elementui的官网

如何引入elementui，之前有介绍过

直奔主题如何合并行

给el-table添加span-method去处理合并行的逻辑
上代码

<el-table height="100%" :data="dateTable" :span-method="objectSpanMethod">
</el-table>

	objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex < 3) {   // 设置需要合并的列
          if (rowIndex % 2 ==0) {   // 设置合并多少行
            return {
              rowspan: 2, // 需要合并的行
              colspan: 1  // 需要合并的列
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
    },

如果数据是后端提供的，数据格式不是平铺的

eg：
平铺：[{},{},{},{}]
不平铺：[infos:[{},{}],account:{}]

那么就需要在拿到数据后做一下处理
方法代码如下

  updateData(){
      this.dateTable=[]
      let on =0
      for(let i=0;i<this.$store.state.tableData.datas.length;i++){
        let house_info=this.$store.state.tableData.datas[i]
        console.log(house_info);
        on++
        for(let j=0;j<house_info.infos.length;j++){
          let info={
            on:on, // 用于编号
            span_num:j===0? house_info.infos.length:0,  
            // 合并行
            // 如果此次是第一次循环，先将合并行数设置为0，为不合并
            // 之后循环每次都取该循环体的长度，也就是有几次循环就有几行需要合并
            id: house_info.account.id,  //表数据
            name: house_info.account.name,  //表数据
            account_id: house_info.account.id,  //表数据
            real_name: house_info.account.real_name,  //表数据
            status: house_info.infos[j].status,  //表数据
            created: house_info.account.created,  //表数据
            device: house_info.infos[j].device,  //表数据
            org_id: house_info.infos[j].organization.parent?house_info.infos[j].organization.parent.id:'',  //表数据
            org: house_info.infos[j].organization.parent?house_info.infos[j].organization.parent.name:'',  //表数据
            dep_id: house_info.infos[j].organization.child?house_info.infos[j].organization.child.id:'',  //表数据
            dep: house_info.infos[j].organization.child?house_info.infos[j].organization.child.name:'',  //表数据
            role: house_info.infos[j].role.name,  //表数据
            expires: house_info.infos[j].expires,  //表数据
          }
          // console.log(info.real_name,info.role,info.name,info.dep,info.org);
          this.dateTable.push(info)
        }
      }
      console.log(this.dateTable);
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex < 3) {
          if (row.span_num > 0) {
            return {
              rowspan: row.span_num,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
    },

效果如下