element-plus+vue3+ts动态合并el-table行列（精简无报错及遍历方法）

一·、遍历处理数据

1、:span-method=“objectSpanMethod” 绑定合并单元格方法

 <el-table
            class="mytable"
            :data="drugDeptApplyDetailVOs"
            style="width: 100%;height: 600px;overflow: scroll"
            border
          
            :span-method="objectSpanMethod"
           >

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、定义objectSpanMethod

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,
          };
        }
      }
    },

二、精简版（推荐）

1、table绑定合并方法arraySpanMethod

<el-table style="height: 70vh" :data="tableData" :span-method="arraySpanMethod" border>

2、定义arraySpanMethod（单列合并行）

const arraySpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
  if (columnIndex === 1) {
    let currentCategory: any = row.orgName
    let nextRow: any = tableData.value[rowIndex - 1]
    if (nextRow && nextRow.orgName == currentCategory) {
      return [0, 0]
    } else {
      let count = 1
      while (
        tableData.value[rowIndex + count] &&
        tableData.value[rowIndex + count].orgName === currentCategory
      ) {
        count++
      }

      return [count, 1]
    }
  }
}

3、单列合并行效果

4、定义多列合并行（此方法是合并第二列的字段相同及第三列的字段相同）如果想其他列其他字段可以结合自己判断条件以此类推，可以继续合并其他更多列，跟需求而来

const arraySpanMethodHeatstation = ({ row, column, rowIndex, columnIndex }: any) => {
  if (columnIndex == 1) {
    let currentCategory: any = row.companyName
    let nextRow: any = tableDataHeatStation.value[rowIndex - 1]
    if (nextRow && nextRow.companyName == currentCategory) {
      return [0, 0]
    } else {
      let count = 1
      while (
        tableDataHeatStation.value[rowIndex + count] &&
        tableDataHeatStation.value[rowIndex + count].companyName === currentCategory
      ) {
        count++
      }
      return [count, 1]
    }
  }

  if (columnIndex == 2) {
    let currentCategory: any = row.heatExchangeStationName
    let nextRow: any = tableDataHeatStation.value[rowIndex - 1]
    if (nextRow && nextRow.heatExchangeStationName == currentCategory) {
      return [0, 0]
    } else {
      let count = 1
      while (
        tableDataHeatStation.value[rowIndex + count] &&
        tableDataHeatStation.value[rowIndex + count].heatExchangeStationName === currentCategory
      ) {
        count++
      }
      return [count, 1]
    }
  }
}

5、多列合并行效果