【前端求助帖】关于使用element-plus select 模板嵌套popover中使用select选择后，上一个select自动关闭的问题

Jason.裕哥2024-06-14 17:31

先看下效果

主页代码如下

项目使用的是Vue3+vite，下载后，直接pnpm i安装依赖， pnpm dev 就是可以跑起来

复制代码

<el-button type="warning" round @click="openDia">打开弹框</el-button>
        <el-dialog v-model="dialogTableVisible" title="业务" width="800">
            <el-select v-model="value" placeholder="Select" @visible-change="visibleChange">
                <template #empty>
                    <div style="padding:15px;">
                        <div class="select-header">
                            <helloWord></helloWord>
                        </div>
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column prop="date" label="Date" width="180" />
                            <el-table-column prop="name" label="Name" width="180" />
                            <el-table-column prop="address" label="Address" />
                        </el-table>
                    </div>
                </template>
            </el-select>
        </el-dialog>

代码解释，点击按钮，弹窗一个框，框里面有个下拉框，下拉框里面使用的是空模板-插槽

插槽中有一个二级组件和表格显示。

组件代码

复制代码

<script setup>
    import { ref } from 'vue'
    import { Filter } from '@element-plus/icons-vue'
    const filterObjLength = ref(-1);
    const openFilter = () => { };
    const value = ref("A");
</script>

<template>
    <el-popover placement="right" :width="400" trigger="click" :teleported="false">
        <template #reference>
            <el-button :icon="Filter"></el-button>
        </template>
        <el-select v-model="value" placeholder="Select">
            <el-option value="A">A</el-option>
            <el-option value="B">B</el-option>
            <el-option value="C">C</el-option>
        </el-select>
    </el-popover>
</template>

<style scoped>
    .read-the-docs {
        color: #888;
    }
</style>

组件中是一个弹窗框，通过点击按钮显示这个框，这个框里面是一个select下拉框。

问题：

在组件中，选择这个select下拉框，例如选择B，选择后后关闭最上面的那个select，也就是使用空插槽的select。

个人能力有限实在找不到问题和解决办法了，求教各位前端大佬帮帮忙。

源码文件：demo下载

小弟再次跪谢了。