小编点评

这段代码看起来是 Vue 3 和 Vite 的项目，使用了 Element Plus 的 Dialog 和 Select 组件。从描述中，你遇到了在使用空插槽的 Select 下拉框中，选择某个选项后，最顶部的那个 Select 组件被关闭的问题。 这里是一个简易的解决方案： 1. 在使用空插槽的 Select 组件上添加 `ref` 属性，以便在 Vue 实例中使用这个组件： ```html A B C ``` 2. 在 Vue 实例的方法中，为这个 `ref` 添加一个 `visibleChange` 事件监听器，用于处理选择变化： ```javascript export default { methods: { visibleChange(value) { if (value === 'B') { this.$refs.selectComponent.visible = false; } }, }, }; ``` 这样，在选择 B 之后，最顶部的那个 Select 组件应该会关闭。 不过，请注意，这种方法可能会导致顶部 Select 组件一直处于关闭状态，除非你手动将其打开。为了解决这个问题，你可以考虑在 Vue 实例的 `data` 属性中初始化 `dialogTableVisible` 为 `false`，并在打开弹窗时将其设置为 `true`。这样，当选择发生变化时，根据选择的值来更新 `dialogTableVisible`，从而控制弹窗的显示与隐藏。

正文

先看下效果

主页代码如下

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

小弟在此跪谢了。