elementUI表格table根据后端返回数据自定义span-

先上目标效果图，按需观看

1.png 2.png

后端返回数据的数据格式

微信截图_20200826122421.png

前端处理

table表格

3.png

数据请求

let dataYt = await Home.getProductRelease();//数据请求
        let data = dataYt.data;
        if (data && dataYt.code===200) {
          this.productFlag = false;
          for (const v of data) {
            for (const k of v.product) {
              let param = {
                name: v.groupName,
                moduleName: k.name,
                releaseNum:k.releaseNum,
                keyVersion:k.keyVersion
              }
              this.product.push(param);
            }
          }
          for (let i = 0; i < data.length; i++) {
            this.number.push({
              name:data[i].groupName,
              num:data[i].product.length
            })
          }
          let msgIndex = 0;
          let msgArr = [];
          for (let i = 0; i < this.number.length; i++) {
            let num = this.number[i].num;
            msgIndex += num;
            msgArr.push(msgIndex);
          }
          msgArr.pop();
          msgArr.unshift(0);
          for (let i = 0; i < this.number.length; i++) {
            let num = this.number[i].num;
            this.product[msgArr[i]].rowspan = num;
          }
        }

处理后的数据(注意红框的rowsoan)

image.png

结合:span-method

:span-method="objectSpanMethod"

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (row.rowspan >= 1) {
          return {
            rowspan: row.rowspan,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }

以上就是全部了 处理方法暂时写的略丑 时间有限

转载请注明出处 谢谢!