ElementUI中Dropdown 下拉菜单el-dropdown-item 点击事件无效

已于 2023-02-03 09:33:26 修改
阅读量5.4k 收藏 1
点赞数 8
分类专栏： 前端 文章标签： elementui vue.js javascript
于 2022-08-10 13:13:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45502195/article/details/126264527
版权

直接在el-dropdown-item上添加click事件，点击后没有任何反应

在click后添加native修饰符，则可解决问题。代码如下
在这里插入图片描述

在给Vue组件（el-dropdown-item就是一个组件）绑定事件的时候，必须加上native修饰符才能生效，native可以监听根元素的原生事件

Vue3 - Element Plus 下拉菜单 el-dropdown 阻止冒泡传递到上层触发事件，解决 dropdown 下拉菜单组件被容器元素包裹时点击事件触发，会连带触发外层包裹容器的点击事件
王佳斌
02-27 2481
vue3，element plus，el-dropdown，stop，command，使用.stop无效，下拉菜单组件，下拉菜单Dropdown，点击事件冒泡，@command如何绑定stop修饰符，阻止事件冒泡，使用el-dropdown下拉菜单阻止事件冒泡，阻止了点击事件冒泡，触发了父元素怎么办，click点击时带动了外层元素的点击事件咋办，如何解决vue3使用下拉菜单组件时，点击触发方式会连同上层div同时触发click点击，element plus组件自带的事件如何阻止其冒泡，阻止内层冒泡，将dro
Dropdown 下拉菜单中点击事件失效 el-dropdown-item 内的 @click点击无效
AmbroseLe
04-06 2125
第一种就是把@click 改为 @click.native 如果不行的话就使用指令@command 写法 <el-dropdown trigger="click" @command="handleCommand" placement="bottom-end" style="margin-left: 10px" > <spa.
el-dropdown-item 上添加 @click 事件监听器,不触发，分析
qq_40268422的博客
04-28 403
在这个例子中，el-dropdown-item 是 Element UI 的一个组件，而不是原生的 HTML 元素。如果直接使用 @click 来监听点击事件，那么实际上是在监听这个组件自定义的 click 事件，而不是原生的 click 事件。在这种情况下，你需要使用 .native 修饰符来监听原生的 click 事件。所以，使用 @click.native 是为了确保无论 el-dropdown-item 组件是否触发自定义的 click 事件，都能够正确地监听到点击事件。
使用VUE下拉框组件el-dropdown-item，设置click点击事件，会触发两次
qq_42955997的博客
04-07 7485
项目场景： 毕设项目 问题描述 问题帖链接：https://ask.csdn.net/questions/7683469?answer=53747393&username=qq_42955997 原因分析： 使用的组件是elementplus的el-dropdown下拉框组件，官方并没有提供@click的方法，所以可能出现一些未知的问题。 解决方案： 这里官方提供了一个方法叫commond，官方说明是“点击菜单项触发的事件回调”，这正是我们需要的。解决方式参考帖子：https://blog.csdn
下拉菜单el-dropdown-item点击事件未生效问题
huangjinsheng1988的专栏
09-14 424
el-dropdown-item
vue2项目el-table中嵌套el-dropdown, 下拉菜单事件不响应
Cocoon_Xu的博客
04-19 820
最近在做项目改造，发现之前element-plus中正常使用el-dropdown，在element中没响应，查了官方文档了解到两个版本dropdown的事件不一样。在element中，使用common事件感觉有点绕弯子，所以我用了.native 修饰符的方式实现了下拉菜单的事件触发。.native - 监听组件根元素的原生事件。主要是给自定义的组件添加原生事件。下面分别看一下两个版本的写法。
elementui 下拉框组件（el-dropdown）绑定点击事件不生效
weixin_45898996的博客
02-09 1135
elementui 下拉框组件（el-dropdown）如何绑定点击事件
如何在 Vue 项目中解决 el-dropdown-item 点击无效的问题
weixin_55932347的博客
11-29 2074
当在 Vue 项目中遇到 el-dropdown-item 点击无效的问题时，可以通过在 @click 后添加 .native 来解决。
Element Dropdown下拉菜单的使用方法
10-15
在上述代码中，`<el-dropdown>` 包裹了触发下拉菜单的元素（这里是 `span`），`<el-dropdown-menu>` 内包含了下拉菜单的各个选项。`el-icon-arrow-down` 是用于展示下拉箭头的图标。 ### 触发对象 Dropdown 可以与...
vue+element搭建后台小总结 el-dropdown下拉功能
10-16
el-dropdown是Element UI中用于实现下拉菜单功能的组件，它允许用户通过点击触发下拉显示更多的选项。在搭建后台管理系统时，该组件被广泛用于实现用户交互功能，比如筛选条件的选择、编辑操作的弹出菜单等。 知识...
ElementUI中el-dropdown-item 点击事件无效
qq_37916164的博客
10-15 1674
若直接在el-dropdown-item上添加click事件，点击后没有任何反应。 在click后添加native修饰符，则可解决问题。代码如下： <el-dropdown> <span class="user"></span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item @click.native="changePassword">修改密码<...
Dropdown 下拉菜单 el-dropdown-item绑定事件(native)
weixin_65019617的博客
08-22 636
修饰符来绑定事件，是因为它内部已经处理了原生事件和自定义事件的绑定方式。是一个自定义的组件，它并不是一个原生的HTML元素，所以当你想在。修饰符来告诉Vue将事件绑定到根元素上。上绑定原生事件时，你需要使用。
解决：element-ui 下拉菜单el-dropdown-item添加点击事件@click无效
weixin_58622844的博客
03-21 1499
element-ui 下拉菜单el-dropdown-item添加点击事件@click无效
解决vue中使用elementUI中el-dropdown下拉el-dropdown-item添加点击事件click没有反应的问题
minx_6688的博客
07-31 4428
通过给click事件添加.native解决 原代码 //添加点击click事件不生效 <el-dropdown-item @click="remoToken">退出</el-dropdown-item> 修改后的代码 //可以生效 <el-dropdown-item @click.native="remoToken">退出</el-dropdown-item> ...
使用el-dropdown 下拉菜单时移入或点击元素都不显示对应下拉内容，并报错 this.triggerElm.setAttribute is not a function
lingliu0824的博客
08-15 7185
不具名插槽元素作为触发元素，当前报错为触发元素调用方法调用报错，考虑是否是触发元素获取错误。检查移入的组件和下拉显示的组件先后顺序，移入的组件必须在下拉显示的组件前面。查看el-dropdown组件源码，如果没有单独设置移入元素，则使用。...
vue---el-dropdown在el-table中无效的解决方法
maidu_xbd的博客
11-26 3257
加入【<templateslot-scope="scope">...</template>】
elementui 中 el-dropdown-menu__item加点击事件无效
weixin_49210760的博客
12-10 2223
在element中有些组件，你直接加点击事件无效 比如这里这个handle事件不会触发 这时候我们需要加修饰符.native 这样就可以正常点击触发了 如果遇到别的同样的情况，可以首先考虑这个
elementui下拉菜单el-dropdown-menu组件loading效果
最新发布
11-02
Element UI 的下拉菜单 `el-dropdown-menu` 组件本身并不直接提供内置的 loading 效果，它主要用于显示一组可选项供用户选择。如果你想要在下拉菜单打开时显示加载状态，通常需要自定义一些逻辑或者结合第三方库（如...
element UI中下拉菜单的el-dropdown-item无法触发click事件怎么解决？
m0_47147246的博客
04-06 3551
element UI中下拉菜单的el-dropdown-item无法触发click事件怎么解决？ <el-dropdown class="infor" size="medium"> <span> <i class="el-icon-more-outline"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item&gt
element-plus el-dropdown下拉不显示
qq_45780616的博客
07-24 721
解决：el-dropdown-menu元素外添加<template #dropdown>
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值