浅谈ElementUI中switch回调函数change的参数问题


Posted in Javascript onAugust 24, 2018

需求说明

八个switch组件,用同一个回调函数

switch组件状态发生变化时需要知道它目前开关状态

需要知道当前是哪个switch

问题描述

按照官方文档对switch事件的描述

事件名称 说明 回调参数
change switch 状态发生变化时的回调函数 新状态的值

下面这样写可以满足第二个需求,change回调函数中的参数callback就是开关当前的状态值,默认是boolean类型,但是第三个需求还不能解决.

<el-switch
 v-model="value1"
 @change='changeStatus'>
</el-switch>

<script>
 var vm = new Vue({
 el: "#app",
 data: {
  value1: true
 },
 methods: {
  change: function(callback){
  console.log(callback);
  }
 }
 })
</script>

解决办法

下面代码中的$event就是switch的当前状态值,而num就是自定义的参数

<el-switch
 v-model="value1"
 @change='changeStatus($event,1)'>
</el-switch>
<el-switch
 v-model="value2"
 @change='changeStatus($event,2)'>
</el-switch>

<script>
 var vm = new Vue({
 el: "#app",
 data: {
  value1: true,
  value2: false
 },
 methods: {
  change: function($event,num){
  console.log($event);
  console.log(num);
  }
 }
 })
</script>

拓展知识:基于element-ui(vue版)使用switch时change回调函数中的形参传值问题

需求说明

有多个switch组件

需要知道switch的状态

表格中当前行(scope.row)的数据

问题描述

官方文档中对switch中change的描述:

浅谈ElementUI中switch回调函数change的参数问题

目前能得到switch的状态值,但是无法得到change回调中第二个形参的值

解决方法:

change回调函数默认形参的实参是$event,其它的实参传自己需要的数据就ok

浅谈ElementUI中switch回调函数change的参数问题

浅谈ElementUI中switch回调函数change的参数问题

以上这篇浅谈ElementUI中switch回调函数change的参数问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 判断是否存在函数的方法
Jan 03 Javascript
js实现简单计算器
Nov 22 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 Javascript
微信小程序框架的页面布局代码
Aug 17 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 #Javascript
微信小程序支付PHP代码
Aug 23 #Javascript
vue+axios 前端实现的常用拦截的代码示例
Aug 23 #Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 #Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 #Javascript
React key值的作用和使用详解
Aug 23 #Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 #Javascript
You might like
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
微信支付开发发货通知实例
2016/07/12 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
javascript 数组的方法集合
2008/06/05 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
一则python3的简单爬虫代码
2014/05/26 Python
教你用Python写安卓游戏外挂
2018/01/11 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
python基础 range的用法解析
2019/08/23 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
次世代生活态度:Hypebeast
2018/07/05 全球购物
经济系大学生求职信
2013/10/01 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
清洁工个人工作总结
2015/03/05 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
2015入党自传书范文
2015/06/26 职场文书
初中信息技术教学反思
2016/02/16 职场文书
Redis集群的关闭与重启操作
2021/07/07 Redis
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL
Python 可迭代对象 iterable的具体使用
2021/08/07 Python
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL