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

需求说明

八个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的描述：

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

解决方法：

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

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

赞 (0)

相关推荐

  • vue element-ui 绑定@keyup事件无效的解决方法

    解决办法: <el-input v-model="searchParmas.gameName" placeholder="游戏名称" class="w120" @keyup.native="getGameList(searchParmas.gameName)"></el-input> 加上.native覆盖原有封装的keyup事件即可. 以上这篇vue element-ui 绑定@keyup事件无效的解

  • element-ui中select组件绑定值改变,触发change事件方法

    1.安装vuecli脚手架 2.终端输入 cnpm i element-ui -S 安装element-ui 3.按需引入select组件 在main.js中写入如下代码 /* 导入第三方库开始 */ import 'element-ui/lib/theme-chalk/index.css'; // 按需加载Select组件 import {Select,Option,Dialog,Button} from 'element-ui' Vue.use(Select) Vue.use(Option)

  • 解决element-ui中下拉菜单子选项click事件不触发的问题

    将@click改为@click.native='logoutHandle';即可监听选项的点击事件. <el-dropdown class="pull-right" > <span class="el-dropdown-link"> <img src="./img/header.jpg" alt="" class="pull-right"> </span> &

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

    需求说明 八个switch组件,用同一个回调函数 switch组件状态发生变化时需要知道它目前开关状态 需要知道当前是哪个switch 问题描述 按照官方文档对switch事件的描述 事件名称 说明 回调参数 change switch 状态发生变化时的回调函数 新状态的值 下面这样写可以满足第二个需求,change回调函数中的参数callback就是开关当前的状态值,默认是boolean类型,但是第三个需求还不能解决. <el-switch v-model="value1" @

  • 浅谈python中的getattr函数 hasattr函数

    hasattr(object, name) 作用:判断对象object是否包含名为name的特性(hasattr是通过调用getattr(ojbect, name)是否抛出异常来实现的). 示例: >>> hasattr(list, 'append') True >>> hasattr(list, 'add') False getattr(object,name,default): 作用:返回object的名称为name的属性的属性值,如果属性name存在,则直接返回其

  • 浅谈JavaScript中变量和函数声明的提升

    现象: 1. 在JavaScript中变量和函数的声明会提升到最顶部执行. 2. 函数的提升高于变量的提升. 3. 函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4. 匿名函数不会提升. 5. 不同<script>块中的函数互不影响. 例子: 函数声明提升高于变量声明 //同时声明变量a和函数a var a; function a() {} alert(typeof a); //显示的是"function",初步证明function的优先级高于var.

  • 浅谈Mysql中类似于nvl()函数的ifnull()函数

    IFNULL(expr1,expr2) 如果expr1不是NULL,IFNULL()返回expr1,否则它返回expr2.IFNULL()返回一个数字或字符串值,取决于它被使用的上下文环境. mysql> select IFNULL(1,0); -> 1 mysql> select IFNULL(0,10); -> 0 mysql> select IFNULL(1/0,10); -> 10 mysql> select IFNULL(1/0,'yes'); ->

  • 浅谈OpenCV中的新函数connectedComponentsWithStats用法

    主要内容:对比新旧函数,用于过滤原始图像中轮廓分析后较小的区域,留下较大区域. 关键字:connectedComponentsWithStats 在以前,常用的方法是"是先调用 cv::findContours() 函数(传入cv::RETR_CCOMP 标志),随后在得到的连通区域上循环调用 cv::drawContours() " 比如,我在GOCVHelper中这样进行了实现 //寻找最大的轮廓 VP FindBigestContour(Mat src){ int imax =

  • 浅谈jQuery中Ajax事件beforesend及各参数含义

    Ajax会触发很多事件. 有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$.ajax来调用并且分配. $.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle the complete event } // ... }); 全局事件,可以用bind来绑定,用unbind来取消绑定.这个跟click/mousedown/keyup等事件类似.但他

  • 浅谈python中截取字符函数strip，lstrip，rstrip

    浅谈python中截取字符函数strip，lstrip，rstrip

    一.起因 今天在做角色控制中,有一个地方用到rstrip,判断用户请求的url是否与数据库对应可用权限中url相符. if request.path == x.url or request.path.rstrip('/') == x.url: #精确匹配,判断request.path是否与permission表中的某一条相符 借此机会总结一下python中strip,lstrip和rstrip. 二.介绍 Python中strip用于去除字符串的首位字符,同理,lstrip用于去除左边的字符,r

  • 浅谈使用Python内置函数getattr实现分发模式

    本文研究的主要是使用Python内置函数getattr实现分发模式的相关问题,具体介绍如下. getattr 常见的使用模式是作为一个分发者.举个例子,如果你有一个程序可以以不同的格式输出数据,你可以为每种输出格式定义各自的格式输出函数,然后使用唯一的分发函数调用所需的格式输出函数. 例如,让我们假设有一个以 HTML.XML 和普通文本格式打印站点统计的程序.输出格式在命令行中指定,或者保存在配置文件中.statsout 模块定义了三个函数:output_html.output_xml 和 o

  • 浅谈Python中函数的参数传递

    1.普通的参数传递 >>> def add(a,b): return a+b >>> print add(1,2) 3 >>> print add('abc','123') abc123 2.参数个数可选,参数有默认值的传递 >>> def myjoin(string,sep='_'): return sep.join(string) >>> myjoin('Test') 'T_e_s_t' >>>

  • 浅谈numpy中linspace的用法 (等差数列创建函数)

    浅谈numpy中linspace的用法 (等差数列创建函数)

    linspace 函数 是创建等差数列的函数, 最好是在 Matlab 语言中见到这个函数的,近期在学习Python 中的 Numpy, 发现也有这个函数,以下给出自己在学习过程中的一些总结. (1)指定起始点 和 结束点. 默认 等差数列个数为 50. (2)指定等差数列个数 (3)如果数列的元素个数指定, 可以设置 结束点 状态. endpoint : bool, optional If True, stop is the last sample. Otherwise, it is not

随机推荐