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 数组运用实现代码
Apr 13 Javascript
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
js 金额格式化来回转换示例
Feb 23 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
微信小程序一周时间表功能实现
Oct 17 Javascript
JS实现按比例缩小图片宽高
Aug 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输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
用PHP代码给图片加水印
2015/07/01 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
清除输入框内的空格
2016/12/21 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
Python中AND、OR的一个使用小技巧
2015/02/18 Python
Python KMeans聚类问题分析
2018/02/23 Python
Python 类的特殊成员解析
2018/06/20 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
python logging.info在终端没输出的解决
2020/05/12 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
python如何写个俄罗斯方块
2020/11/06 Python
Python中生成ndarray实例讲解
2021/02/22 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
C#面试常见问题
2013/02/25 面试题
写给妈妈的道歉信
2014/01/11 职场文书
会计顶岗实习心得
2014/01/25 职场文书
清洁工岗位职责
2014/01/29 职场文书
《童年》教学反思
2014/02/18 职场文书
环保建议书作文
2014/03/12 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
Django实现聊天机器人
2021/05/31 Python
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang