Vue Element-Plus中el-dropdown和el-select嵌套使用时如何解决下拉菜单选项选择器立即关闭的问题？

Vue Element Plus：解决el-dropdown和el-select嵌套导致下拉菜单立即关闭的问题

本文探讨在Vue Element Plus中，el-dropdown和el-select嵌套使用时，el-select下拉选项选择器立即关闭的问题，并提供解决方案。

问题：开发者使用<el-dropdown></el-dropdown>作为外层容器，内部嵌套多个<el-select></el-select>选择器，每个选择器位于一个<el-dropdown-item></el-dropdown-item>中。点击打开el-select选择器后，鼠标移动到选项便会立即关闭选择器，无法正常选择。虽然使用<el-menu></el-menu>替代<el-dropdown></el-dropdown>能解决问题，但实际需求是使用下拉菜单。

问题代码示例：

立即学习“前端免费学习笔记（深入）”；

<template>
  <el-dropdown>
    <slot></slot>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="item in menuItems" :key="item.name">
          {{ item.name }}
          <el-select class="m-2" placeholder="Select" style="width: 150px" v-model="item.options.name">
            <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>
import { ref } from 'vue';
export default {
  data() {
    return {
      name: ref(''),
    };
  },
  props: {
    menuItems: [],
  },
};
</script>

<style scoped>
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>

根本原因：el-dropdown的关闭机制与el-select的选项点击事件冲突。el-select未完成选择前，el-dropdown因鼠标移动到选项而提前关闭。

Writer

企业级AI内容创作工具

176

查看详情

推荐解决方案：避免直接嵌套

最佳实践是避免在el-dropdown中直接嵌套el-select。 对于多级选择场景，建议使用Element Plus提供的el-tree-select组件，它更适合处理此类情况。

次优解决方案（不推荐）：深入研究事件机制并自定义

如果必须使用el-dropdown和el-select，则需要深入研究Element Plus的事件机制，尝试通过自定义事件或调整组件属性来解决冲突。但这并非推荐的做法，因为它违反了组件设计的初衷，且维护成本较高。 这可能涉及到阻止事件冒泡或使用$nextTick等方法，但实现复杂且容易出错。

总而言之，为了代码的可维护性和可读性，使用el-tree-select是解决此问题的最佳方案。 避免直接嵌套，选择更合适的组件，能有效避免此类冲突问题。

以上就是Vue Element-Plus中el-dropdown和el-select嵌套使用时如何解决下拉菜单选项选择器立即关闭的问题？的详细内容，更多请关注php中文网其它相关文章！