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 相关文章推荐
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
js判断浏览器是否支持html5
Aug 17 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
几行js代码实现自适应
Feb 24 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
js实现筛选功能
Nov 24 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 用sock技术发送邮件的函数
2007/07/21 PHP
一个很不错的PHP翻页类
2009/06/01 PHP
PHP 日,周,月点击排行统计
2012/01/11 PHP
php正则表达匹配中文问题分析小结
2012/03/25 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
PHP制作用户注册系统
2015/10/23 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
python妙用之编码的转换详解
2017/04/21 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
python requests证书问题解决
2019/09/05 Python
python实现随机加减法生成器
2020/02/24 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
python实现贪吃蛇双人大战
2020/04/18 Python
Django如何重置migration的几种情景
2021/02/24 Python
经典c++面试题四
2015/05/14 面试题
《桂林山水》教学反思
2014/02/08 职场文书
预备党员公开承诺书
2014/05/28 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers