浅谈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实现unicode和字符的互相转换
Jul 18 Javascript
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 Javascript
JavaScript实现省市联动效果
Nov 22 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 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
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
基于jquery的超简单上下翻
2010/04/20 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
python计算N天之后日期的方法
2015/03/31 Python
Python import用法以及与from...import的区别
2015/05/28 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
python Django的web开发实例(入门)
2019/07/31 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
JAVA和C++的区别
2013/10/06 面试题
专营店会计助理岗位职责
2013/11/29 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
团队精神口号
2014/06/06 职场文书
走群众路线剖析材料
2014/10/09 职场文书
解除施工合同协议书
2014/10/17 职场文书
工作收入住址证明
2014/10/28 职场文书
2016党校培训心得体会
2016/01/07 职场文书