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 相关文章推荐
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
js读取注册表的键值示例
Sep 25 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
详解原生js实现offset方法
Jun 15 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 Javascript
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
PHP stream_context_create()作用和用法分析
2011/03/29 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
JavaScript接口的实现三种方式(推荐)
2016/06/14 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
详解webpack介绍&amp;安装&amp;常用命令
2017/06/29 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
python进行文件对比的方法
2018/12/24 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
婴儿地球:Baby Earth
2018/12/25 全球购物
南京某软件公司的.net面试题
2015/11/30 面试题
酒店管理毕业生自荐信
2013/10/24 职场文书
幼儿园义卖活动方案
2014/01/17 职场文书
计算机个人求职信范例
2014/01/24 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
新郎答谢词
2015/01/04 职场文书