element-ui 下拉菜单el-dropdown-item添加点击事件

于 2024-06-25 23:03:52 发布
阅读量408 收藏
点赞数 1
文章标签： ui javascript vue.js 前端 ecmascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zing_ing/article/details/139972501
版权

使用element-ui下拉菜单组件Dropdown时绑定点击事件，事件不生效。

@click 常见于其用在Vue中的事件绑定，而@实际上是 v-on 的简写，而 v-on 则是对 vue 的事件体系封装之后的 API接口。

native修饰符用于处理DOM原生事件，由于组件 DropDown并没有封装点击事件，因此需要添加原生的点击事件，因此使用@click.native。

<el-dropdown-menu slot="dropdown">
   <el-dropdown-item @click.native="signOut">登出</el-dropdown-item>
</el-dropdown-menu>
Frilled Lizard
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui@2.15.9 cdn资源
08-09
Element UI 提供了大量的组件，如按钮（Button）、表格（Table）、下拉菜单（Dropdown）、日期选择器（DatePicker）、模态框（Modal）、通知（Notification）等。每个组件都有详细的文档说明和示例，你可以根据需要...
在element-ui的select下拉框加上滚动加载
12-12
在项目中，我们需要运用到很多来自后端返回的数据。有时是上百条，有时甚至上千条。如果加上后端的多表查询或者数据量过大，这就导致在前端的显示就会及其慢，特别是在网络不好的时候更是...以下以element-ui中的sel
element-ui中el-dropdown下拉菜单组件添加点击事件
徐三岁的博客
05-29 4340
组件直接绑定点击事件@click无效是不生效的， 需要添加@click.native进行绑定点击事件。 <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">
el-dropdown-item 上添加 @click 事件监听器,不触发，分析
qq_40268422的博客
04-28 277
在这个例子中，el-dropdown-item 是 Element UI 的一个组件，而不是原生的 HTML 元素。如果直接使用 @click 来监听点击事件，那么实际上是在监听这个组件自定义的 click 事件，而不是原生的 click 事件。在这种情况下，你需要使用 .native 修饰符来监听原生的 click 事件。所以，使用 @click.native 是为了确保无论 el-dropdown-item 组件是否触发自定义的 click 事件，都能够正确地监听到点击事件。
el-dropdown使用图片作为点击事件，有黑框
最新发布
weixin_46229676的博客
05-22 100
【代码】el-dropdown使用图片作为点击事件，有黑框。
如何在 Vue 项目中解决 el-dropdown-item 点击无效的问题
weixin_55932347的博客
11-29 1598
当在 Vue 项目中遇到 el-dropdown-item 点击无效的问题时，可以通过在 @click 后添加 .native 来解决。
el-dropdown下拉框点击事件，获取点击选项的值和label
Dolores_zsq的博客
05-09 1757
用数组的find方法找到点击选项的lineName值。
Element el-dropdown 事件
林中明月间丶
06-20 3219
这里我需要点击下拉选择值后，既要得到下拉里面的值 也要得到这一行数据的值。设置trigger="click" 就可以加点击事件。我这里是结合el-table一起使用。
elementUI中下拉菜单组件el-dropdown绑定点击事件
preoccupied_的博客
12-12 3653
el-dropdown绑定点击事件
el-dropdown-item添加点击事件
weixin_53635194的博客
08-19 581
两种方案 一、使用官方给出的解决方案command指令（），我自己第一次使用时报错，索性就直接不用了； 二、使用@click.native 就可以成功的添加上点击事件； Ps：扩展@click的其他用法 @click.stop： 阻止事件冒泡； @click.prevent： 阻止事件的默认行为 （提交事件不再重载页面）； @click.capture： 优先触发； @click.self： 只有自己能触发，子元素无法触发； @click.once： 只能提交一次；
Element-ui中元素滚动时el-option超出元素区域的问题
10-16
这通常是由于Element-ui的下拉菜单（dropdown）组件，即el-select与el-option的交互方式导致的。Element-ui的el-select组件通常用于创建一个可选列表，用户可以从中选择一个或多个选项。当el-select的选项列表（el-...
Element Dropdown下拉菜单的使用方法
10-15
- **分隔线**：添加 `divided` 属性可以在 `<el-dropdown-item>` 之间创建分割线，如 `<el-dropdown-item divided>蚵仔煎</el-dropdown-item>`。 Element Dropdown 提供了丰富的定制选项，可以通过 CSS 样式调整...
el-dropdown-menu指令事件的使用方法
m0_62317155的博客
06-07 3522
集合el-table使用，将表格的某一行数据通过点击对应的按钮传入到对应的指令事件中，使@command可以传两个参数，一个是command指令，一个是表格当前行的数据。官网的使用方法：点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。"下拉菜单11111111""下拉菜单22222222""command的数据是：""command的命令是""表格传入的一行数据是""下拉菜单333333""表格传入的行数据是："'路径1111111''路径3333333''路径4444444'
解决：element-ui 下拉菜单el-dropdown-item添加点击事件@click无效
weixin_58622844的博客
03-21 1017
element-ui 下拉菜单el-dropdown-item添加点击事件@click无效
【Vue+elementUI】el-dropdown 添加click事件
webFrontEndDev的博客
03-18 855
<el-dropdown v-show="scope.row.clueRemind == 2" class="tip-sales" @command="handleCommand" @click.native="beforeHandleCommand(scope.row.id)"> <span class="el-dropdown-link"> 提醒...
＜el-dropdown＞按钮点击出来下拉菜单，点击下拉菜单触发事件
Good Luck
03-16 2172
<el-dropdown trigger="click" style="font-size: 0.85em;"> <el-button type="primary" icon="el-icon-user" class="c-btn"> 设置角色 <i class="el-icon-arrow-down el-icon--right"></i> .
Vue-elementUI 表格里动态添加行操作按钮，并且是el-dropdown 下拉框，给el-dropdown绑定点击事件
热门推荐
qq_19808621的博客
04-18 1万+
Vue-elementUI 表格里动态添加行操作按钮，并且是el-dropdown 下拉框，给el-dropdown绑定点击事件 一共两种方法: 一、直接给el-dropdown-item 绑定点击事件。这里需要用 @click.native=" name" 这样绑定才会有效。 <el-table :data=“orderAcceptTableData” stripe border hei...
使用element-UI的el-dropdown时绑定@click，click事件不触发。
weixin_47495673的博客
02-22 341
原因：@Command与@Click都是单击事件，但@Click是单纯的点击事件，而@Command可以传递参数。如图：给<el-dropdown>标签添加click事件， 但是并不起作用。
element-ui 使用Dropdown实现二级菜单
11-26
element-ui是一款基于Vue.js的组件库，其中包含了Dropdown组件，可以用来实现下拉菜单。下面是使用element-ui实现二级菜单的方法： 1.首先需要在Vue项目中安装element-ui组件库，可以使用npm命令进行安装： ```shell npm install element-ui --save ``` 2.在需要使用Dropdown组件的Vue文件中引入Dropdown组件： ```javascript import { Dropdown, DropdownMenu, DropdownItem } from 'element-ui'; ``` 3.在Vue文件中使用Dropdown组件，并在Dropdown组件中添加DropdownMenu和DropdownItem组件，其中DropdownMenu组件用来包含二级菜单，DropdownItem组件用来添加菜单项： ```html <template> <div> <el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu> <el-dropdown-item>菜单项1</el-dropdown-item> <el-dropdown-item>菜单项2</el-dropdown-item> <el-dropdown-item> <span>二级菜单<i class="el-icon-arrow-right el-icon--right"></i></span> <el-dropdown-menu> <el-dropdown-item>二级菜单项1</el-dropdown-item> <el-dropdown-item>二级菜单项2</el-dropdown-item> </el-dropdown-menu> </el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> </template> ``` 4.最后需要在Vue文件中引入element-ui样式： ```javascript import 'element-ui/lib/theme-chalk/index.css'; ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值