elementui 动态合并单元格

效果图

废话不多说直接上代码

1、:span-method=“objectSpanMethod” 在table属性中启用合并单元格方法

 <el-table
            class="mytable"
            :data="drugDeptApplyDetailVOs"
            style="width: 100%;height: 600px;overflow: scroll"
            border
            @selection-change="parentHandleSelectionChange"
            :span-method="objectSpanMethod"
            :row-class-name="tableRowClassName"
            :header-cell-style="{background:'#469cc9',color:'#ffffff'}">

2、处理数据

   //处理数据
          for (let i = this.drugDeptApplyDetailVOs.length - 1; i > 0; i--) {
            //从后向前遍历
            if (!this.drugDeptApplyDetailVOs[i].rowspanOrg) {
              //设置初始值(可理解为：每个数据项必定占一行)
              this.drugDeptApplyDetailVOs[i].rowspanOrg = 1;
            }
            if (this.drugDeptApplyDetailVOs[i].applyOrg == this.drugDeptApplyDetailVOs[i - 1].applyOrg) {
              //当前公司名与前一个数据的公司相同时 设置rowspan（前数据一项与下一行的相同时 合并一行）
              this.drugDeptApplyDetailVOs[i - 1].rowspanOrg = this.drugDeptApplyDetailVOs[i].rowspanOrg + 1;
              this.drugDeptApplyDetailVOs[i].rowspanOrg = -1;
            }
            if (!this.drugDeptApplyDetailVOs[i].rowspanCode) {
              //设置初始值(可理解为：每个数据项必定占一行)
              this.drugDeptApplyDetailVOs[i].rowspanCode = 1;
            }
            if (this.drugDeptApplyDetailVOs[i].applyCode == this.drugDeptApplyDetailVOs[i - 1].applyCode) {
              //当前公司名与前一个数据的公司相同时 设置rowspan（前数据一项与下一行的相同时 合并一行）
              this.drugDeptApplyDetailVOs[i - 1].rowspanCode = this.drugDeptApplyDetailVOs[i].rowspanCode + 1;
              this.drugDeptApplyDetailVOs[i].rowspanCode = -1;
            }
          }

3、合并方法

 /**
     *合并单元格
     * @param row
     * @param column
     * @param rowIndex
     * @param columnIndex
     * @returns {{colspan: number, rowspan: number}}
     */
    objectSpanMethod({row, columnIndex}) {
      if (columnIndex === 1) {
        if (row.rowspanOrg > 0) {
          return {
            rowspan: row.rowspanOrg,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
      if (columnIndex === 2) {
        if (row.rowspanCode > 0) {
          return {
            rowspan: row.rowspanCode,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },