el-table 行合并及合并后序号错位处理

1.表格数据结构

const dataRes = {
        isRuleType: 1,
        splitWarehouseTransferOrderPreviewList: [
          {
            transferResult: '成功',
            transferOrderNo: 'PTS1793179829709848576',
            isBelowMinCapacityNum: 1,
            minCapacityNum: 9223372036854776000,
            maxCapacityNum: 343,
            totalWeight: 0.03969,
            splitWarehouseInfoList: [{
              subOrderNo: 'FCBH1793187570528567296',
              productName: '金领冠珍护淳萃较大婴儿配方奶粉听装1×6×720g',
              productCode: 245904052703,
              goodId: 4588,
              skuCode: 245904052703,
              skuName: null,
              transferNumber: 1,
              unit: 'EA'
            }],
            inStationId: 428,
            inStationName: 'GG电商仓111',
            outStationId: 209,
            outStationName: 'WERTWERT',
            deptCode: 'NF',
            deptName: '婴幼儿营养品事业部',
            orderTypeName: '营养品',
            orderTypeId: 167720364048082001,
            isTransfer: 0
          }
        ]
}

2.数据处理记录合并行

 dataRes.splitWarehouseTransferOrderPreviewList.forEach(item => {
        if (item.splitWarehouseInfoList && item.splitWarehouseInfoList.length) {
          item.spanMethod = item.splitWarehouseInfoList.length
          item.splitWarehouseInfoList.forEach(v => {
            newTableData.push({ ...item, ...v })
          })
        } else {
          newTableData.push({ ...item })
        }
      })

3.表格代码

<el-table :header-cell-style="getRowClass" :data="tableData" border fit highlight-current-row :span-method="objectSpanMethod">
  <el-table-column align="center" prop="transferResult" label="生成结果" min-width="180" v-if="resultFlag" :key="2" show-overflow-tooltip></el-table-column>
  <el-table-column align="center" prop="transferOrderNo" label="调拨单号" min-width="180" v-if="resultFlag" :key="3"></el-table-column>
  <el-table-column prop="rowIndex" label="订单序号" align="center" width="80"></el-table-column>
  <el-table-column align="center" prop="isBelowMinCapacityNum" label="低于最低起运量" min-width="180">
    <template slot-scope="scope"> {{ { 0: '否', 1: '是' }[scope.row.isBelowMinCapacityNum] }}</template>
  </el-table-column>
  <el-table-column align="center" prop="minCapacityNum" label="最低起运量/吨" min-width="180"></el-table-column>
  <el-table-column align="center" prop="maxCapacityNum" label="最大起运量/吨" min-width="180"></el-table-column>
  <el-table-column align="center" prop="totalWeight" label="总重量/吨" min-width="180"></el-table-column>
  <el-table-column align="center" prop="subOrderNo" label="分仓补货单号" min-width="220" show-overflow-tooltip></el-table-column>
  <el-table-column align="center" prop="productName" label="商品名称" min-width="200" show-overflow-tooltip></el-table-column>
  <el-table-column align="center" prop="productCode" label="商品编码" min-width="180" show-overflow-tooltip></el-table-column>
  <el-table-column align="center" prop="skuCode" label="SKU编码" min-width="180"></el-table-column>
  <el-table-column align="center" prop="transferNumber" label="调拨数量" min-width="180"></el-table-column>
  <el-table-column align="center" prop="unit" label="单位" min-width="180"></el-table-column>
  <el-table-column align="center" prop="inStationName" label="调入仓" min-width="180" show-overflow-tooltip></el-table-column>
  <el-table-column align="center" prop="outStationName" label="调出仓" min-width="180" show-overflow-tooltip></el-table-column>
  <el-table-column align="center" prop="deptName" label="事业部" min-width="180" show-overflow-tooltip></el-table-column>
  <el-table-column align="center" prop="orderTypeName" label="商家订单类型" min-width="180"></el-table-column>
  <el-table-column align="center" prop="erpOrderTypeName" label="ERP订单类型名称" min-width="180"></el-table-column>
  <el-table-column align="center" label="操作" width="120" fixed="right" prop="operation" v-if="!resultFlag" :key="4">
    <template slot-scope="scope">
      <el-button type="text" @click="handleDel(scope.row)">删除</el-button>
    </template>
  </el-table-column>
</el-table>

3.方法

getDataList() {
   const params = {
        orderNoType: 1,
        orderNos: this.payload.orderNos,
        isRuleType: this.isRuleType
      }
      this.listLoading = true
      this.$service.restock.getTransferOrderPreview(params).then(res => {
        this.listLoading = false
        const newData = this.dataMerge(res.data)
        this.tableData = [...newData]
      }).catch(() => {
        this.listLoading = false
      })
    },
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const columnArr = ['subOrderNo', 'productName', 'productCode', 'skuCode', 'transferNumber', 'unit']
      if (!columnArr.includes(column.property)) {
        const currentValue = row.id
        const preRow = this.tableData[rowIndex - 1]
        const preValue = preRow ? preRow.id : null
        // 如果当前值和上一行的值相同，则将当前单元格隐藏
        if (currentValue === preValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          return { rowspan: row.spanMethod, colspan: 1 }
        }
      }
    },
    handleDel(row) {
      const newDataIndexArr = []
      this.paramsList = this.paramsList.filter(v => v.id !== row.id)
      this.paramsList.forEach((item, index) => {
        const obj = { rowIndex: index + 1 }
        if (item.splitWarehouseInfoList && item.splitWarehouseInfoList.length) {
          item.spanMethod = item.splitWarehouseInfoList.length
          item.splitWarehouseInfoList.forEach(v => {
            newDataIndexArr.push({ ...item, ...v, ...obj })
          })
        } else {
          newDataIndexArr.push({ ...item, ...obj })
        }
      })
      this.tableData = [...newDataIndexArr]
    },
dataMerge(list) {
      const newDataArr = []
      if (list.splitWarehouseTransferOrderPreviewList && list.splitWarehouseTransferOrderPreviewList.length) {
        list.splitWarehouseTransferOrderPreviewList.forEach((item, index) => {
          const obj = { rowIndex: index + 1 }
          if (item.splitWarehouseInfoList && item.splitWarehouseInfoList.length) {
            item.spanMethod = item.splitWarehouseInfoList.length
            item.splitWarehouseInfoList.forEach(v => {
              newDataArr.push({ ...item, ...v, ...obj })
            })
          } else {
            newDataArr.push({ ...item, ...obj })
          }
        })
      }
      return newDataArr
    }