el-table,列表合并,根据名称列名称相同的品名将其它列值相同的进行合并

el-table,列表合并,根据名称列名称相同的品名讲其它列值相同的进行合并,并且不能垮品名合并

如图

用到el-table合并行的方法合并

tableSpanMethod({ row, column, rowIndex, columnIndex }) {
  if (column.property === "materielName") {
    //合并商品名
    const _row = this.spanArr[rowIndex];
    const _col = _row > 0 ? 1 : 0;
    return {
      rowspan: _row,
      colspan: _col,
    };
  }
  // 其它列根据商品名进行合并
  if (column.property === "pieceUnit" || column.property === "pieceNum") {
    const _row = this.spanNewArr[rowIndex] ? this.spanNewArr[rowIndex] : 0;
    return {
      rowspan: _row,
      colspan: _row > 0 ? 1 : 0,
    };
  }
},

   // 获取合并行
    getSpanArr(data) {
      this.spanArr = []; //第2列合并
      let pos = 0; //index

      for (let i = 0; i < data.length; i++) {
        1;
        if (i === 0) {
          // 如果是第一条记录（即索引是0的时候），向数组中加入１
          this.spanArr.push(1); //第二列合并
        } else {
          //第二列合并
          if (data[i].materielName === data[i - 1].materielName) {
            // 如果orgUnitId相等就累加，并且push 0
            this.spanArr[pos] += 1;
            this.spanArr.push(0);
          } else {
            // 不相等push 1
            this.spanArr.push(1);
            pos = i;
          }
        }
      }

      this.spanNewArr = {};
      let tip = 0;
      this.spanArr.forEach((item, index) => {
        for (let i = 0; i < item; i++) {
          const row = data[i + index];
          const lastrow = data[i + index - 1];
          if (i == 0) {
            this.spanNewArr[i + index] = 1;
            tip = i + index;
          } else {
            if (
              row.pieceUnit == lastrow.pieceUnit ||
              row.pieceNum == lastrow.pieceNum
            ) {
              this.spanNewArr[tip] = this.spanNewArr[tip]
                ? this.spanNewArr[tip]
                : 1;
              this.spanNewArr[tip] += 1;
            } else {
              this.spanNewArr[i + index] = 1;
              tip = i + index;
            }
          }
        }
      });

      console.log(this.spanNewArr);
    },

然后在初始值的时候调取方法

   this.getSpanArr(this.tableData);

方法二:一个全新的demo,更简单一些