vue中将el-switch值true、false改为number类型的1和0

目录
  • 将el-switch值true、false改为number类型的1和0
    • 需求描述
    • 说明
  • element ui中el-switch使用的坑
    • 需求说明
    • 需求描述
    • 期望结果
    • 解决方法

将el-switch值true、false改为number类型的1和0

需求描述

后端传回的status值为1（number类型）对应el-switch值true（打开）状态，status值为0（number类型）对应el-switch值false（关闭）状态。

<el-switch active-value="1" inactive-value="0" v-model="menuInfoForm.status"></el-switch>

说明

当用如上的【active-value="1" inactive-value="0"】，此时的【active-value】值类型为string，如果要求【active-value】值类型为number时，必须在其前面加上:

<el-switch :active-value="1" :inactive-value="0" v-model="menuInfoForm.status"></el-switch>

element ui中el-switch使用的坑

需求说明

1、根据后台传值动态显示开关（0为关，1为开）

2、对开关进行操作时请求后台，需要传两个参数：id，type

需求描述

我先说我的需求，我想在列表的每一条添加多个开关，可以改当前一条数据的状态，并发送到服务端，并根据服务端返回的结果局部刷新当前页数据

期望结果

状态是后端返回给我的状态，分别是1和2，我先点击switch发送给后端这条数据的id，然后修改这一条数据的状态，而不是重新拿这个列表，如果后端返回失败的情况这个switch不做改变

 

解决方法

Swich默认是boolean类型，而后台传值 为number类型，这个时候我们想用number来取代boolean类型；

 <template slot-scope="scope">
    <el-switch v-model="state"
        active-value="1"
        inactive-value="0"
        active-color="#13ce66"
        inactive-color="#ff4949"
        @change="changeStatus($event,scope.row)"
         inactive-value="2">
    </el-switch>
</template>

请注意以面的写法，active-value和inactive-value的值分别是字符串的1和2,如果你赋值为数字类型的 1 或 2是无法正常工作的，若赋值为数值类型，需这样写：

 <template slot-scope="scope">
    <el-switch v-model="state"
      active-color="#13ce66"
      inactive-color="#ff4949"
     :active-value="1"
     :inactive-value="0"
     @change="changeStatus($event,scope.row)")>
    </el-switch>
</template>

我们使用绑定的方式，同时@change可以传值$event就是switch的当条信息值，scope.row为参数，还可以再添加index表示当前列表的序号

改变状态是要注意返回的状态根据状态来选择相应的写法

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue.js封装switch开关组件的操作

    我的项目本来用的element,但是switch开关不符合设计要求,于是自己封装了一个switch组件,并且实现了switch开关的双向数据绑定 <template> <label role="checkbox" :class="['switch', { toggled }]"> <input type="checkbox" class="switch-input" @change="t

  • Vue+Element switch组件的使用示例代码详解

    Vue+Element switch组件的使用示例代码详解

    代码如下所示: <el-table-column label="商品状态" align="center"> <template slot-scope="{row}"> <el-switch v-model="row.goods_state" class="switch" :active-value="1" :inactive-value="0&qu

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

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

  • vue中将el-switch值true、false改为number类型的1和0

    vue中将el-switch值true、false改为number类型的1和0

    目录 将el-switch值true.false改为number类型的1和0 需求描述 说明 element ui中el-switch使用的坑 需求说明 需求描述 期望结果 解决方法 将el-switch值true.false改为number类型的1和0 需求描述 后端传回的status值为1(number类型)对应el-switch值true(打开)状态,status值为0(number类型)对应el-switch值false(关闭)状态. <el-switch active-value=&quo

  • 简单理解vue中el、template、replace元素

    本文实例为大家解析了vue中el.template.replace的元素,供大家参考,具体内容如下 api: http://cn.vuejs.org/api/#el el 类型: String | HTMLElement | Function 限制: 在组件定义中只能是函数. 详细: 为实例提供挂载元素.值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数.注意元素只用作挂载点.如果提供了模板则元素被替换,除非 replace 为 false.元素可以用 vm.$el

  • Python中的True,False条件判断实例分析

    本文实例讲述了Python中的True,False条件判断用法.分享给大家供大家参考.具体分析如下: 对于有编程经验的程序员们都知道条件语句的写法: 以C++为例: 复制代码 代码如下: if (condition)  {      doSomething();  } 对于Python中的条件判断语句的写法则是下面的样子: 复制代码 代码如下: if (condition):      doSomething() 那么对于条件语句中的condition什么时候为真什么时候为假呢? 在C++/Ja

  • vue中将html字符串转换成html后遇到的问题小结

    今天整理之前做vue项目时遇到的一些问题,发现了当时遇到的一个很小但是又会引出很多问题的一个问题(总之就是很有意思,听我慢慢给你到来),这个问题就是当时处理后端数据时,如何将后端返回来的字符串转换成html标签,其实根据vue官网的一个v-html方法是不是觉得很简单,当时我也是这样想的,可是我发现了几个问题(官网给出的动态渲染任意 HTML 容易导致 XSS 攻击的问题我就不说了,在这里我只是用它来渲染数据): 第一,当我用v-html将后端字符串转换成了html标签后,发现我在那个字符串中解

  • 浅谈Python里面None True False之间的区别

    None虽然跟True False一样都是布尔值. 虽然None不表示任何数据,但却具有很重要的作用. 它和False之间的区别还是很大的! 例子: >>> t = None >>> if t: ... print("something") ... else: ... print("nothing") ... nothing 区分None和False.使用is来操作! >>> if t is None: ...

  • vue数据字典取键值方式

    vue数据字典取键值方式

    目录 vue数据字典取键值 vue项目的字典问题 在utils中写一个dict.js的文件 在main.js中引用刚才封装好的getDict方法 之后我们就可以在系统中使用 vue数据字典取键值 首先:项目里的数据字典路由已经配好 进入项目页面 引入数据字典 import { getTypeValue } from '@/api/dict/dictValue/index'; 创建前获取到字典 getTypeValue('org_attr_type').then(response => { thi

  • vue中将网页打印成pdf实例代码

    整理文档,搜刮出一个vue中将网页打印成pdf的代码,稍微整理精简一下做下分享. <template> <div class="pdf-wrap" id="pdfWrap"> <button v-on:click="getPdf">点击下载PDF</button> <div class="pdf-dom" id="pdfDom"></div&

  • jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法

    本文实例讲述了jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法.分享给大家供大家参考,具体如下: 先看如下代码: /** * 全选 */ function checkAll() { $("input[name=ids]").attr("checked", true); } /** * 全不选 */ function uncheckAll() { $("input[name=ids]&quo

  • 解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题

    如下所示: let name = 'www.baidu.com/' <a :href="name" rel="external nofollow" > 点击跳转到: localhost:8080/www.baidu.com/ 解决: 写成<a :href="'https//:'+name" rel="external nofollow" > 补充知识:问题:vue.js a标签href里有变量,函数拼接

随机推荐