浅谈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将数据导入Excel示例代码
Sep 10 Javascript
javascript实现获取字符串hash值
May 10 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
前端jquery部分很精彩
May 03 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
javascript的this关键字详解
May 20 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 Javascript
Element Input输入框的使用方法
Jul 26 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 Javascript
深入理解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自动生成月历代码
2006/10/09 PHP
main.php
2006/12/09 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
Python实现简单拆分PDF文件的方法
2015/07/30 Python
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
使用python turtle画高达
2020/01/19 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
推荐信怎么写
2014/05/09 职场文书
党员一帮一活动总结
2014/07/08 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
业余无线电通联Q语
2022/02/18 无线电
Java字符串逆序方法详情
2022/03/21 Java/Android
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android