Vue中合并表格的方法

//HTML
<el-table :data="tableData" :span-method="objectSpanMethod">
  <el-table-column prop="orderNo" label="订单编号" />
  <el-table-column prop="name" label="供应商" />
  <el-table-column prop="way" label="结算方式">
    <template v-slot="{ row }">
      <span class="pay-class">{{ row.way }}</span>
     </template>
   </el-table-column>
  <el-table-column prop="product" label="商品名称" />
  <el-table-column prop="number" label="订单数量(KG)" />
  <el-table-column label="包装规格">
    <template v-slot="{ row }">
      <span>{{ row.number ? row.number + 'kg/袋' : '-' }}</span>
    </template>
  </el-table-column>
  <el-table-column prop="number" label="采购单价(元/KG)" />
  <el-table-column prop="number" label="商品全额(元)" />
 
  <el-table-column prop="number" label="订单总额(元)" />
   
  <el-table-column label="订单状态">
    <template v-slot="{ row }">
      <div class="flex-center">
        <span class="circle blue" />
        <span class="ml-5">{{ row.number }}</span>
      </div>
     </template>
   </el-table-column>
</el-table>

//data
tableData: [
        {
          orderNo: 'DD2023091600002',
          name: '供应商全称',
          way: '货到付款',
          product: '伊品生物 98.5% L-赖氨酸盐酸',
          number: '300'
        },
        {
          orderNo: 'DD2023091600002',
          name: '供应商全称',
          way: '货到付款',
          product: '伊品生物 98.5% L-赖氨酸盐酸',
          number: '300'
        },
        {
          orderNo: 'DD2023091600002',
          name: '供应商全称',
          way: '货到付款',
          product: '伊品生物 98.5% L-赖氨酸盐酸',
          number: '300'
        },
        {
          orderNo: 'DD2023091600003',
          name: '供应商全称',
          way: '先款后货',
          product: '盐酸维生素B1-C80%',
          number: '300'
        },
        {
          orderNo: 'DD2023091600003',
          name: '供应商全称',
          way: '先款后货',
          product: '盐酸维生素B1-C80%',
          number: '300'
        }
      ],

//方法
// 获取相同名称的个数 tableData: 表格的数据, projectName: 确定相同的参数
    handleTableData(tableData){
      let rowSpanArr = [], position = 0;

      tableData.forEach((item, index) => {
        if (index === 0) {
          rowSpanArr.push(1);
          position = 0;
        } else if (item.orderNo === tableData[index - 1].orderNo) {
          rowSpanArr[position] += 1; // 项目名称相同，合并到同一个数组中
          rowSpanArr.push(0);
        } else {
          rowSpanArr.push(1);
          position = index;
        }
      })
      this.rowSpanArr = rowSpanArr
    },
    // 单元格的处理方法 当前行row、当前列column、当前行号rowIndex、当前列号columnIndex
    objectSpanMethod({ row, column, rowIndex, columnIndex }){
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 8 || columnIndex === 9) {
        const rowSpan = this.rowSpanArr[rowIndex];

        return {
          rowspan: rowSpan, // 行
          colspan: 1 // 列
        }
      }
    }