element-ui根据条件合并单元格

<template>
    <!-- 托盘标列表 -->
    <UK-Table
      :data="trayTableData"
      @getSelection="getSelection"
      showCheckBox
      showIndex
      :rowHeader="trayRowHeader"
      showSet
      :objectSpanMethod="objectSpanMethod"
    >
      <template #headerFloatLeft>
        <el-button type="primary" @click="uploadingDetail('上传打托文件')">
          上传打托文件
          <i class="el-icon-upload el-icon--right"></i>
        </el-button>
        <el-button type="primary" @click="printOrder">打印托盘标</el-button>
      </template>
      <template #tableButton>
        <el-button :type="trayTableData.length ? 'warning' : ''" :disabled="!trayTableData.length" @click="carpoolingOrder"
          >拼车下单</el-button
        >
        <el-button :type="trayTableData.length ? 'primary' : ''" :disabled="!trayTableData.length" @click="returnTop"
          >返库上架</el-button
        >
      </template>
    </UK-Table>
</template>

<script>
import { setrowspans, getWordCnt } from '@/utils/mergeCells'
export default {
	methods: {
		getList(val) {
	      if (val) {
	        this.detailId = val.Id
	        this.IsConfirm = val.IsConfirm
	      }
	      overseasReplenPalletGetDetail(this.detailId).then(res => {
	        if (res.ErrorCode === 0) {
	          const { BaseInfo, ReplenishOrderList, TrayLabelList } = res.Body
	          ReplenishOrderList.forEach(v => {
	            v.ItemInfo.forEach(item => {
	              this.PlanCtnsTotal += item.PlanCtns
	              this.CtnsTotal += item.Ctns
	            })
	          })
	          this.formInline = BaseInfo
	          this.replenishOrderList = ReplenishOrderList
	          // 单元格合并
	          this.trayTableData = setrowspans(TrayLabelList, 'FnSku')
	          // 合并的单元格重新排序
	          this.trayTableData = getWordCnt(TrayLabelList, 'FnSku', 'TrayIndex')
	        }
	      })
	    },
	    // 表格合并
	    objectSpanMethod({ row, columnIndex }) {
	      if ([2, 3].includes(columnIndex)) {
	        return {
	          rowspan: row.rowspan,
	          colspan: 1
	        }
	      }
	    },
	}
}
</script>

mergeCells.js

/*
  tableData：要合并的表格数组
  rowProperty：以哪个字段为判断条件合并
*/
export function setrowspans(tableData, rowProperty) {
  // 先给所有的数据都加一个v.rowspan = 1
  tableData.forEach(v => {
    v.rowspan = 1
  })
  // 双层循环
  for (let i = 0; i < tableData.length; i++) {
    for (let j = i + 1; j < tableData.length; j++) {
      if (tableData[j][rowProperty] && tableData[i][rowProperty] === tableData[j][rowProperty]) {
        tableData[i].rowspan++
        tableData[j].rowspan--
      }
    }
    // 这里跳过已经重复的数据
    i = i + tableData[i].rowspan - 1
  }
  return tableData
}
// 合并的数据重新排序
/*
  tableArr：要合并的表格数组
  rowProperty：以哪个字段为判断条件排序
  customIndex：自定义排序的字段
*/
export function getWordCnt(tableArr, rowProperty, customIndex) {
  let temporaryFnSku = ''
  let num = 0
  for (let i = 0, l = tableArr.length; i < l; i++) {
    if (tableArr[i][rowProperty] !== temporaryFnSku) {
      num = 0
    }
    temporaryFnSku = tableArr[i][rowProperty]
    if (tableArr[i][rowProperty] === temporaryFnSku) {
      num++
      tableArr[i][customIndex] = num
    }
  }
  return tableArr
}

效果图