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
}

效果图

有时候我们的需求要求要求某一列合并6行，某一列合并两行，简而言之就是说不同列的合并条件不同可以这样写

    // 表格合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (column.label === 'HBL') {
        const sameRoutIdList = this.tableData.filter(i => i.HblGroupIndex === row.HblGroupIndex)
        const spanLength = sameRoutIdList.length
        const firstIndex = this.tableData.findIndex(i => i.HblGroupIndex === row.HblGroupIndex)

        if (spanLength > 1) {
          //如果长度大于 1
          if (rowIndex === firstIndex) {
            return {
              rowspan: spanLength, //合并的行数
              colspan: 1
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        } else {
          return {
            rowspan: 1,
            colspan: 1
          }
        }
      }


      if (['原DE Split No', '原箱数'].includes(column.label)) {
        const sameRoutIdList = this.tableData.filter(i => i.OldSplitNoGroupIndex === row.OldSplitNoGroupIndex)
        const firstIndex = this.tableData.findIndex(i => i.OldSplitNoGroupIndex === row.OldSplitNoGroupIndex)
        const spanLength = sameRoutIdList.length
        if (spanLength > 1) {
          //如果长度大于 1
          if (rowIndex === firstIndex) {
            return {
              rowspan: spanLength, //合并的行数
              colspan: 1
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        } else {
          return {
            rowspan: 1,
            colspan: 1
          }
        }
      }
    }

效果图：

方法二

// utils.js
// 表格合并终极方法防止页面卡死
export function agetSpanArr(data, str) {
  let spanArr = []
  let pos = 0
  for (var i = 0; i < data.length; i++) {
    if (i === 0) {
      spanArr.push(1)
      pos = 0
    } else {
      // 判断当前元素与上一个元素是否相同
      if (data[i][str] != null && data[i][str] != undefined && data[i][str] === data[i - 1][str]) {
        spanArr[pos] += 1
        spanArr.push(0)
      } else {
        spanArr.push(1)
        pos = i
      }
    }
  }
  return {
    data,
    spanArr
  }
}

// index.vue
import { agetSpanArr } from '@/utils/mergeCells'
spanArr: []


agetSpanArr(this.tableData, 'GroupIndex')
this.spanArr = agetSpanArr(this.tableData, 'GroupIndex').spanArr



objectSpanMethodNormal({ row, column, rowIndex, columnIndex }) {
  if ([2, 3, 4, 5].includes(columnIndex)) {
    const _row = this.spanArr[rowIndex]
    const _col = _row > 0 ? 1 : 0
    return {
      rowspan: _row,
      colspan: _col
    }
  }
},