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 事件队列调整方法
Sep 18 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 Javascript
Javascript实现打鼓效果
Jan 29 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 MYSQL 数据备份类
2009/06/19 PHP
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
PHP 第一节 php简介
2012/04/28 PHP
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
vue实例的选项总结
2020/06/09 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
用Python一键搭建Http服务器的方法
2018/06/01 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
Python Web版语音合成实例详解
2019/07/16 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
python线程join方法原理解析
2020/02/11 Python
python xlsxwriter模块的使用
2020/12/24 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
Structs界面控制层技术
2013/10/11 面试题
土木工程专业自荐信
2013/10/04 职场文书
母婴店促销方案
2014/03/05 职场文书
培训研修方案
2014/06/06 职场文书
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android