素材巴巴 > 程序开发 >

el-select组件绑定change事件踩坑

程序开发 2023-09-06 18:19:46

要注意区分elementUI组件(比如el-select、el-button、el-input等组件)的focus、click、change等事件和DOM的focus、click、change原生事件,二者是不一样的。如果要在element组件上触发原生事件,一律都得加.native修饰符,否则无法触发事件。但是要注意很多elementUI的组件本身封装了focus、click、change等事件,比如el-button的click事件,是经过elementUI封装过的,所以给el-button绑定click事件时,不需要加.native修饰符,el-input的@focus事件也是同理。今天踩了一个坑,在给el-select绑定change事件时,没搞清楚该change事件是elementUI封装过的change事件@change=“changeGateway(event)”,发现event一直是和选中的option的value值保持一致,按照网上博客写的event.target.value拿到的值一直都是undefined,最后才发现,博客里的select是原生的select,而我写的是el-select,给el-select绑定的change事件不是dom原生的change事件,而是elementUI封装过了的change事件,回调函数的参数是下拉列表目前的选中值,所以$event才一直和选中的option的value值保持一致。另外要注意由于el-select组件已经封装了change事件,就无法再绑定原生的change事件,如果对el-select绑定change事件像@change.native这样写,change事件是不会触发的!
在这里插入图片描述
再次强调:elementUI组件如果已经封装过click、change、focus等事件,则无法再绑定DOM原生的click、change、focus事件,即使加.native修饰符也没用。
在这里插入图片描述
但今天来了个需求,在点击选择关联网关的下拉列表时,不仅要传网关name参数给后端,还要在改变option的同时再额外多传一个gatewayIp参数给后端,这个gatewayIp要在下拉列表option的数据里面拿,起初想通过给el-select组件绑定change事件拿到选中的option的完整数据,最终发现做不到,那样只能拿到选中的option的value值(因为elementUI封装的change事件的回调参数就是下拉列表目前的选中值,见上图),最后的实现思路是给el-option绑定原生click事件拿到选中的option的完整数据item,代码如下:


 changeGateway(data){// console.log(data) //此data是选中的那个option的完整数据item this.form.gateWayIp = data.gateWayInfo.ip;
 },
 

标签:

上一篇: 前端傻瓜式入门No.2 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。