element plus+vue3项目出现两个表头以及内容多样

如图中这种表格使用element plus和vue3该如何实现   

element plus 默认的表格都是一个表头对应一个字段  但是组件内也有合并列以及合并行的属性，但是达不到想要的效果

这时候就需要用到template自定义插槽了   这边因为没有什么逻辑性 就直接展示代码了

html:

  <el-table :data="tableData" style="width: 100%" height="650">
                <el-table-column prop="Date" label="备注" width="100" fixed="left" align="center">
                    <template #header>
                        <div>日期</div>
                        <div>备注</div>
                    </template>
                    <template #default>
                        <div>2024-05-03</div>
                        <div style="color: #4da4ff" @click="AddRemark">添加备注</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="Name"
                    label="新增用户累计充值"
                    width="150"
                    fixed="left"
                    align="center"
                >
                    <template #header>
                        <div>新增用户</div>
                        <div>累计充值</div>
                    </template>
                    <template #default>
                        <div>0</div>
                        <div>0</div>
                    </template>
                </el-table-column>
                <el-table-column align="center" width="180px" fixed="left">
                    <template #header>
                        <div>成本/回报率</div>
                        <div>用户成本/付费用户</div>
                    </template>
                    <!-- #default="scope" -->
                    <template #default>
                        <div class="flexBox">
                            <div class="NumText">0元</div>
                            <div class="iconEdit">
                                <el-icon :size="15" style="vertical-align: middle">
                                    <EditPen />
                                </el-icon>
                            </div>
                            <span class="solide">/</span>
                            <div class="NumCount">0.00%</div>
                        </div>
                        <div class="flexBottom">
                            <div>0.00</div>
                            <span class="solide">/</span>
                            <div>0.00</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="Address" label="D85" align="center" width="130px">
                    <div class="flexBox">
                        <div>0元</div>
                        <span class="solide">/</span>
                        <div class="NumCount">0.00%</div>
                    </div>
                    <div class="flexBottom">
                        <div>0.00</div>
                        <span class="solide">/</span>
                        <div>0.00</div>
                    </div>
                </el-table-column>
                <el-table-column prop="Address" label="D86" align="center" width="150px">
                    <div class="flexBox">
                        <div>0元</div>
                        <span class="solide">/</span>
                        <div class="NumCount">0.00%</div>
                    </div>
                    <div class="flexBottom">
                        <div>0.00</div>
                        <span class="solide">/</span>
                        <div>0.00</div>
                    </div>
                </el-table-column>
</el-table>

css:

.flexBox {
    display: flex;
    justify-content: center;

    .NumText {
        margin: 0 2px;
    }

    .iconEdit {
        margin-top: -2px;
    }

    .solide {
        margin: 0 5px;
    }

    .NumCount {
        font-weight: bolder;
    }
}

.flexBottom {
    display: flex;
    justify-content: center;

    .solide {
        margin: 0 5px;
    }
}

.el-table__header-wrapper {
    background-color: #f5f7fa;
}