526互联

vue+elementui 合并行

发布时间 2023-06-03 08:52:10作者: 七仔_93

1，数据格式是二维的

如：o:{id：123，

　　prams:{name:aaa,age:11}

　　}

的对象

第一步：先获取返回的数据为indexInfoList，遍历转化为一维数组

 that.indexInfoList.forEach(ele => {
if (ele.prams.length >= 1) {
                ele.prams.map((related, index) => {
                  let aaarr = {};//要拿出来的数据组成新的对象
                 let brr = Object.assign({}, ele, aaarr);//和原来的数据对象拼接成一个新的
                  arr.push(brr);
                });
              } else {
                arr.push(ele);
              }
            });

　　得到新的数组

that.tableData = arr; // 得到拼接后的内容
 that.rowspan(); // 重新合并行
 rowspan() {
      // 每次调用清空数据
      this.spanArr = [];
      this.position = 0;
      console.log(this.tableData);
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1);
          this.position = 0;
        } else {
          // recordId 为需要合并查询的项
          if (
            this.tableData[index].recordId ===
            this.tableData[index - 1].recordId
          ) {
            this.spanArr[this.position] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.position = index;
          }
        }
      });
    },
//调用elementUI的合并方法
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex <= 9) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },