Vue + Element-ui的下拉框el-select获取额外参数详解


Posted in Javascript onAugust 14, 2020

直接上代码吧~

<el-table-column
      label="用户类型"
      width="180">
      <template slot-scope="scope">
       <el-select v-model="scope.row.roleID"
             placeholder="请选择" @change="changeRole($event,scope)">
        <el-option
         v-for="item in roles"
         :key="item.value"
         :label="item.label"
         :value="item.value">
        </el-option>
       </el-select>
      </template>
</el-table-column>

我想在触发下拉框change事件时获取到scope里的值,因为el-select的change事件默认有个回调参数,就是选择的value,如果想额外获取其他的值不能直接写@change="changeRole(scope)",这样会覆盖默认的参数,加上$event就可以取到了。

不仅仅是el-select,其余的Element-UI的组件中实现这种不想覆盖默认参数都可以这样使用。

补充知识:element UI中的select选择器的change方法需要传递多个值

如果直接调用change事件,不传任何参数,则可以获取到当前选中的值(因为默认会将event参数传递过去)

场景:

你需要将select选择器 ”选中的当前元素“ 和 ”其他你需要的值“ 一起传递过去?

做法:

change ($event,“你要传递的其他值”)

以上这篇Vue + Element-ui的下拉框el-select获取额外参数详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript base64编码实现代码
Dec 02 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
javascript中定义类的方法汇总
Dec 28 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
jquery自定义表格样式
Nov 23 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 #Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 #Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 #Javascript
JS+css3实现幻灯片轮播图
Aug 14 #Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 #Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 #Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 #Javascript
You might like
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
jQuery 使用个人心得
2009/02/26 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
wxpython实现图书管理系统
2018/03/12 Python
django使用LDAP验证的方法示例
2018/12/10 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
Python基于当前时间批量创建文件
2020/05/07 Python
python是怎么被发明的
2020/06/15 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
生日派对邀请函
2014/01/13 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis