javascript - vue element-plus 下拉菜单嵌套选择器 选择器自动收起 无法选择 如何解决？

Question

el-dropdown与el-select嵌套使用，下拉菜单内的选择器打开后，鼠标移向选项会直接收起选择器。
以下为问题代码

<script setup>import { ArrowDown } from '@element-plus/icons-vue'import { ref } from 'vue'</script><template>    <el-dropdown @visible-change="onChangeVisible" >    <span class="el-dropdown-link">        <slot></slot>        <!-- 样式设置 -->        <!-- <el-icon class="el-icon--right">            <arrow-down />        </el-icon> -->    </span>        <template #dropdown>            <el-dropdown-menu>                <el-dropdown-item v-for="item in menuItems">                    {{ item.name }}                    <el-select                        v-model="item.options.name"                        class="m-2"                        placeholder="Select"                        style="width: 150px"                    >                        <el-option                            v-for="option in item.options"                            :key="option.id"                            :label="option.name"                            :value="option.id"                        />                    </el-select>                </el-dropdown-item>            </el-dropdown-menu>        </template>    </el-dropdown></template><script>export default {    data() {        return {            name : ref('')        }    },    props: {        menuItems : []    },    methods: {        onChangeVisible(visible) {            this.$emit('changeMenuVisible',visible);            // console.log(visible);        }    }}</script><style scoped>.example-showcase .el-dropdown-link {cursor: pointer;color: var(--el-color-primary);display: flex;align-items: center;}</style>

如图所示，若鼠标想移至选项进行选择，选择器会直接收起。

尝试将下拉菜单改成静态菜单，发现选择器能正常选择不会自动收起。
但需求是使用下拉菜单。。。
更改代码部分如下

<el-menu>    <el-menu-item v-for="item in menuItems">        {{ item.name }}        <el-select            v-model="item.options.name"            class="m-2"            placeholder="Select"            style="width: 150px"        >            <el-option                v-for="option in item.options"                :key="option.id"                :label="option.name"                :value="option.id"            />        </el-select>    </el-menu-item></el-menu>

静态菜单截图

Answer 1

非要这么实现的话, 可能造成的原因: mouseenter, mouseleave / mouseover, mouseout 等事件触发导致组件状态变更, 自动收起

可以在 DevTools 里监听一下相关事件, 看是否可以避免对应的事件触发

Answer 2

为怎么要在dropdown里面嵌套select呢？
有点奇怪，官方都没想要会有人这样用吧？
如果有多级，建议使用TreeSelect。

Answer 3

这个问题可能是由于el-dropdown和el-select的交互行为导致的。el-dropdown和el-select都有自己的事件处理机制，当你在嵌套使用时，可能会发生冲突或者事件冒泡导致一些意外的行为。

你可以尝试以下几种方法来解决这个问题：

1. 使用 el-menu 代替 el-dropdown：从你的描述和代码中可以看出，el-menu似乎能正常工作，那么你可以考虑直接使用 el-menu 来代替 el-dropdown。
2. 使用事件修饰符：你可以尝试使用 Vue 的事件修饰符来改变事件的默认行为。例如，你可以试试 .stop 修饰符来阻止事件冒泡。

<el-dropdown @visible-change.stop="onChangeVisible">

3. 自定义下拉菜单的行为：你也可以考虑通过自定义事件或方法来实现你需要的下拉菜单的行为。
4. 更新库的版本：你遇到的问题可能是由于库的某个已知问题导致的。查看 Element Plus 的更新日志和 issue，看看是否有相关的修复。如果有，尝试更新到最新版本。
5. 尝试其他的第三方库：如果以上方法都无法解决你的问题，你可能需要考虑使用其他的第三方库来代替 Element Plus，或者其他组件库可能没有这个问题。
6. 查阅官方文档或论坛：Element Plus 的官方文档或者相关的开发者社区可能有关于这个问题的讨论和解决方案。

最后，由于具体的行为可能会根据你的具体代码和设置有所不同，你可能需要做一些实验来找到最适合你的解决方案。