el-table 多行合并 手动添加虚拟行

<template>
    <el-table :data="allData" border ref="table" :cell-style="{ 'text-align': 'center' }" :header-cell-style="{
        background: '#5f697d',
        color: '#fff',
        height: '10px',
        'text-align': 'center'
    }" stripe :span-method="spanMethod">
        <el-table-column prop="orderId" label="订单号">
            <template #default="{ row, $index }">
                <div @click="showItems($index)">{{ row.orderId }} </div>
            </template>
        </el-table-column>

        <el-table-column label="信息A">
            <template #default="{ row }">
                <div v-if="row.isVirtual" style="height:100px">
                    <div style="display: flex;flex-direction: column;">
                        <el-input v-model="row.inputValue" placeholder="请输入内容" />
                        <div v-if="row.itemsListShow">hhhhhhhhhhh</div>
                    </div>

                </div>
                <div v-else>
                    {{ row.infoA }}
                </div>
            </template>
        </el-table-column>

        <el-table-column label="信息B">
            <template #default="{ row }">
                <div v-if="row.isVirtual">

                </div>
                <div v-else>
                    {{ row.infoB }}
                </div>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 原始数据
const originalData = [
    { orderId: '1001', infoA: '张三', infoB: '李四', ORDER_PRO: [{ chirldrenId: "11", chirldrenname: "11" }, { chirldrenId: "22", chirldrenname: "22" }] },
    { orderId: '1002', infoA: '王五', infoB: '赵六', ORDER_PRO: [{ chirldrenId: "13", chirldrenname: "13" }] },
    { orderId: '1003', infoA: '钱七', infoB: '孙八', ORDER_PRO: [] },
];

const showItems = (row) => {
    console.log(row)
    allData.value[row + 1].itemsListShow = !allData.value[row + 1].itemsListShow
}



// 显示数据
const allData = ref();
// 添加虚拟行后的扁平数组
const flattenedData = () => {
    const result = [];
    originalData.forEach((item) => {
        // 正常行
        result.push({ ...item, itemsListShow: false });
        // 虚拟行：保留订单号，添加输入字段
        result.push({
            isVirtual: true,
            orderId: item.orderId,
            inputValue: '',
            ORDER_PRO: item.ORDER_PRO,
            itemsListShow: false,
        });
    });
    allData.value = result;
};
onMounted(() => {
    flattenedData();
});
// 合并方法：
const spanMethod = (params) => {
    const { row, rowIndex, columnIndex } = params;

    if (columnIndex === 0) { // 对于订单号列
        if (rowIndex % 2 === 0) { // 真实数据行
            return { rowspan: 2, colspan: 1 }; // 合并两行
        } else { // 虚拟行
            return { rowspan: 0, colspan: 0 }; // 隐藏该单元格
        }
    }

    if (row.isVirtual && columnIndex === 1) { // 对于虚拟行中的信息A列
        return { rowspan: 1, colspan: 2 }; // 合并后两列
    }

    if (row.isVirtual && columnIndex === 2) { // 对于虚拟行中的信息B列
        return { rowspan: 0, colspan: 0 }; // 隐藏该列
    }

    return { rowspan: 1, colspan: 1 };
};
</script>

 效果：三行数据   但是相当于6行数据每一行的第二行是一个虚拟的合并数据