element ui中的el-dropdown（下拉框）防止点一下就影藏的问题

最新推荐文章于 2025-03-18 14:26:23 发布

qq_42208679

最新推荐文章于 2025-03-18 14:26:23 发布

阅读量3.3k

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_42208679/article/details/111635195

版权

在ElementUI中，遇到el-dropdown组件点击后立即隐藏的问题，特别是当下拉菜单项包含点击事件时。通过修改el-dropdown的触发方式和结构，可以避免下拉框在触发子元素事件后立即收缩。示例代码展示了如何修改el-dropdown及其子元素，以实现点击事件不关闭下拉菜单的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element ui中的el-dropdown（下拉框）防止点一下就影藏的问题

当使用el-dropdown下拉框时，下拉框的每项中，可能需要加入@click、@change或复选框等事件，而el-dropdown-item的事件触发时，el-dropdown下拉框总是会收缩，很不合理。
官网

<el-dropdown trigger="click" placement="left">
  <span class="el-dropdown-link">
    <button class="icon-xxx"></button>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>
    	<!-- 产生点击事件元素 -->
    </el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

修改后

 <el-dropdown trigger="click">
         <span class="el-dropdown-link">站点
           <i class="el-icon-arrow-down el-icon--right"></i>
         </span>
         <el-dropdown-menu slot="dropdown"  class="dropdownMenu">
              <div>
                 下拉菜单中的内容模块
              </div>
          </el-dropdown-menu>
 </el-dropdown>