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

先看下效果

主页代码如下

项目使用的是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下载

小弟在此跪谢了。