vue项目- el-table表格合并行

1.再页面中表格加上行方法

  <el-table

            :span-method="objectSpanMethod"

</el-table>

2，定义2个变量

  spanArr: [], //存储合并单元格的开始位置
      colFields: [
        'itemCode',
        'itemDesc',
        'purchaseApplyNo',
        'purchaseApplyLinenum',
        'purchaseOrderNo',
        'purchaseOrderLinenum',
        'purchaseMode',
        'purchaseMethod',
        'materielSection',
        'materielNo',
        'materielDesc',
        'num',
        'unit',
        'supplierName',
        'technologyId',
        'biddingPlanNo',
        'biddingBatch',
        'outbidDate',
        'frameworkAgreementNo',
        'eCommerceNo',
        'applyUser',
        'applyDate',
        'purchaseTime',
        'plannedDeliveryTime',
        'outbid',
        'contractNo',
        'orderTotalNetPrice',
        'orderTaxInclusivePrice',
        'orderDate',
        'handOverNum',
        'handOverDate',
        'checkNum',
        'checkDate',
        'wbsNo',
        'wbsDesc',
      ],

3. 由于我的表格只需要固定编码和名字，针对这2个字段的判断处理

 getSpanArr() {
      for (let i = 0; i < this.tableData.length; i++) {
        let row = i;
        // let col = i % this.colCount;
        if (row === 0) {
          // i 表示行 j表示列
          for (let j = 0; j < this.colFields.length; j++) {
            this.spanArr[i * this.colFields.length + j] = {
              rowspan: 1,
              colspan: 1,
            };
          }
        } else {
          for (let j = 0; j < this.colFields.length; j++) {
            // 当前和上一次的一样
            //  合并所有列的相同数据单元格
            if (
              this.colFields[j] == 'itemCode' ||
              this.colFields[j] == 'itemDesc'
            ) {
              // 指定合并哪些列
              if (
                this.tableData[row]['itemCode'] !==
                  this.tableData[row - 1]['itemCode'] ||
                this.tableData[row]['itemDesc'] !==
                  this.tableData[row - 1]['itemDesc']
              ) {
                // 哪些不合并:itemCode不一样的,不合并
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1,
                  colspan: 1,
                };
              } else if (
                this.tableData[row][this.colFields[j]] ===
                this.tableData[row - 1][this.colFields[j]]
              ) {
                let beforeItem =
                  this.spanArr[(row - 1) * this.colFields.length + j];
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1 + beforeItem.rowspan, // 合并几列
                  colspan: 1, // 合并几行
                };
                beforeItem.rowspan = 0;
                beforeItem.colspan = 0;
              } else {
                // rowspan 和 colspan 都为1表格此单元格不合并
                this.spanArr[row * this.colFields.length + j] = {
                  rowspan: 1,
                  colspan: 1,
                };
              }
            }
          }
        }
      }
      // 对数据进行倒序
      let stack = [];
      for (let i = 0; i < this.colFields.length; i++) {
        for (let j = 0; j < this.tableData.length; j++) {
          // console.log("i=" + i + " j=" + j);
          // i 表示列 j表示行
          if (j === 0) {
            if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
              stack.push(this.spanArr[j * this.colFields.length + i]);
            }
          } else {
            if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
              stack.push(this.spanArr[j * this.colFields.length + i]);
            } else {
              stack.push(this.spanArr[j * this.colFields.length + i]);
              while (stack.length > 0) {
                let pop = stack.pop();
                let len = stack.length;
                this.spanArr[(j - len) * this.colFields.length + i] = pop;
              }
            }
          }
        }
      }
      // console.log(this.spanArr);
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(this.spanArr[rowIndex * this.colFields.length + columnIndex]);
      return this.spanArr[rowIndex * this.colFields.length + columnIndex];
    },