elementui 合并行

<template>
  <div class="indetail">
    <el-table :data="table.tableData" style="width: 100%" v-show="isbox" :span-method="objectSpanMethod" min-height="40vh" border>
      <el-table-column v-for="column in table.columns" :key="column.prop" :prop="column.prop" :label="column.label" :width="column.width"></el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
export default {
  name: 'detail'
}
</script>
<script lang="ts" setup>
import { i18n } from '@/locales/setupI18n'
import { reactive, onMounted, ref, defineProps, nextTick } from 'vue'
import JsBarcode from 'jsbarcode'
import type { TableColumnCtx } from 'element-plus'
const { t } = i18n.global as any

const table = reactive<any>({
  columns: [
    { label: t('page.箱唛号'), prop: 'containerCode', width: '150px' },
    { prop: 'barCode', label: t('page.商品条码'), width: '150px' },
    { prop: 'commodityCode', label: t('page.商品编码'), width: '150px' },
    { prop: 'commodityName', label: t('page.商品名称'), width: '150px' },
    { label: t('page.生产日期'), prop: 'productionDate', width: '120px' },
    { label: t('page.到期日期'), prop: 'expirationDate', width: '120px' },
    { label: t('page.客户批次'), prop: 'customBatch', width: '120px' },
    { label: t('page.品类'), prop: 'stockTypeName', width: '100px' },
    { label: t('page.数量'), prop: 'amount', width: '90px', align: 'right' },
    { label: t('page.防伪码'), prop: 'logisticsCode' }
  ],
  tableData: []
})

interface SpanMethodProps {
  row: any
  column: TableColumnCtx<any>
  rowIndex: number
  columnIndex: number
}
//合并行
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
  if (columnIndex < 4) {
    let key = ''
    switch (columnIndex) {
      case 0:
        key = 'containerCode'
        break
      case 1:
        key = 'barCode'
        break
      case 2:
        key = 'commodityCode'
        break
      case 3:
        key = 'commodityName'
        break
      case 4:
        key = 'productionDate'
        break
      case 5:
        key = 'expirationDate'
        break
      case 6:
        key = 'customBatch'
        break
    }
    debugger
    if (rowIndex > 0 && row[key] === table.tableData[rowIndex - 1][key] && row.containerCode === table.tableData[rowIndex - 1].containerCode) {
      return { rowspan: 0, colspan: 1 }
    } else {
      let rowspan = 1
      for (let i = rowIndex + 1; i < table.tableData.length; i++) {
        if (row[key] === table.tableData[i][key] && row.containerCode === table.tableData[i].containerCode) {
          rowspan++
        } else {
          break
        }
      }
      return { rowspan, colspan: 1 }
    }
  } else {
    return { rowspan: 1, colspan: 1 }
  }
}
/**
 * 首次加载
 */
onMounted(() => {})
</script>
<style lang="scss" scoped>
.indetail {
  :deep(.el-table) {
    td.el-table__cell,
    th.el-table__cell.is-leaf {
      border-bottom: 1px solid #ebeef5 !important;
    }
    .el-table__body td {
      border-right: 1px solid #ebeef5 !important;
    }
  }
}
</style>

效果：