el-table 扁平化数据后合并单元格

原始数据：

javascript 复制代码

<script setup>

 // 原始数据： 
const preOrderProInfoList ref([
        {
            "PRO_NO": "154685",
            "PRE_PRO_NO": 2303,
            "orders": [
                {
                    "ORDER_NO": "25B00190",
                    "SEND_CENTER_SEQ": 1,
                    "REQ_DVS_CD": "2",
                    "DLVR_WAY_CD": "001",
                    "WARE_STATE_CD": "001",
                    "order_type": "1",
                    "request_type": "0"
                },
                {
                    "ORDER_NO": "25B00189",
                    "SEND_CENTER_SEQ": 1,
                    "REQ_DVS_CD": "2",
                    "DLVR_WAY_CD": "001",
                    "WARE_STATE_CD": "001",
                    "order_type": "1",
                    "request_type": "0"
                }
            ]
        }])



// 扁平化 
// 扁平化后的组合数据
const processedTableData = computed(() =>
    preOrderProInfoList.value.flatMap(combo =>
        combo.orders.map(product => ({
            ...product,
            PRO_NO: combo.PRO_NO,
            PRE_PRO_NO: combo.PRE_PRO_NO,
            PRO_IMG: combo.PRO_IMG || 'https://q7.itc.cn/q_70/images03/20241204/9442f197bdc94c05a32e7ed8b719dd59.jpeg'

        }))
    )
)


const arraySpanMethod = ({ row, rowIndex, columnIndex }) => {
    if ([0, 1].includes(columnIndex)) {
        const list = processedTableData.value
        if (
            rowIndex === 0 ||
            list[rowIndex].PRO_NO !== list[rowIndex - 1].PRO_NO
        ) {
            let rowspan = 1
            for (
                let i = rowIndex + 1;
                i < list.length && list[i].PRO_NO === row.PRO_NO;
                i++
            ) {
                rowspan++
            }
            return { rowspan, colspan: 1 }
        }
        // 合并到上面
        return { rowspan: 0, colspan: 0 }
    }
    // 其他列正常显示
    return { rowspan: 1, colspan: 1 }
}

< /script>

javascript 复制代码

<template>   
<el-table :data="processedTableData" border :span-method="arraySpanMethod" style="width: 100%"
                :cell-style="{ 'text-align': 'center' }" :header-cell-style="{
                    background: '#5f697d',
                    color: '#fff',
                    height: '10px',
                    width: '90%',
                    'text-align': 'center'
                }">
                <!-- 商品图片/编号 -->
                <el-table-column prop="PRO_NO" width="100">
                    <template #header>
                        <div class="label-flex">
                            <div>{{ t('product.商品图片') }}</div>
                            <div>{{ t('order_list.商品编号') }}</div>
                        </div>
                    </template>
                    <template #default="{ row }">
                        <div class="product-cell">
                            <el-image :src="row.PRO_IMG" class="product-img" />
                            <div class="product-info">
                                {{ row.PRO_NO }}
                            </div>
                        </div>
                    </template>
                </el-table-column>

                <!-- 代买商品编号 -->
                <el-table-column prop="PRE_PRO_NO" :label="t('errorInStock.代买商品编号')" width="150">
                    <template #default="{ row }">
                        <div v-if="row.showProductInfo">
                            {{ row.PRE_PRO_NO }}
                        </div>
                    </template>
                </el-table-column>

                <!-- 订单编号 -->
                <el-table-column :label="t('order_list.订单号')" width="180">
                    <template #default="{ row }">
                        <div class="order-item">
                            <el-radio v-model="selectedOrders[row.PRO_NO]" :label="row.ORDER_NO"
                                @change="handleOrderChange(row)">
                                {{ row.ORDER_NO }}
                            </el-radio>
                        </div>
                    </template>
                </el-table-column>
  </el-table>