vue el-switch初始值(默认值)不能正确显示状态问题及解决

目录
  • el-switch 初始值（默认值）不能正确显示状态
  • 使用el-switch显示状态异常
    • 1.问题表述

el-switch 初始值（默认值）不能正确显示状态

先去检查一下接口返回格式 如果是字符串 不需要加冒号

active-value="1" inactive-value="2"

如果是数字

:active-value="1" :inactive-value="2"

使用el-switch显示状态异常

1.问题表述

vue项目中的表格使用了el-switch，一开始这个状态我使用了布尔值来定义，结果显示异常 ，明明有true应该显示绿色开关的，但全都是红色(false)状态

百度之后找了一种方法能解决这个问题，特此记录

首页表格第一次用这个el-switch，此处禁止修改，设置了disabled,state的值也由布尔值换成了数字0或者1。这里就显示正常了

<el-table-column prop="state" label="状态" width="120">
  <template slot-scope="scope">
    <el-switch
      disabled
      v-model="scope.row.state"
      active-value="1"
      inactive-value="0"
      active-color="#13ce66"
      inactive-color="#ff4949"
    >
    </el-switch>
  </template>
</el-table-column>

第二处用的是弹框中使用的，可以修改的

<el-form-item label="状态" props="state" required>
  <el-switch
    v-model="editForm.state"
    active-value="1"
    inactive-value="0"
    @change="changeState(editForm.state)"></el-switch>
</el-form-item>
methods: {
    changeState(state) {
      this.editForm.state = state;
      console.log('嘎嘎地 ',state);
    }
}

打印结果

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

赞 (0)

相关推荐

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

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

  • 关于el-scrollbar滚动条初始化不显示的问题及解决

    目录 el-scrollbar滚动条初始化不显示 el-scrollbar:Element UI隐藏组件 滚动条初始化消失的问题 问题分析 el-scrollbar滚动条初始化不显示 当使用el-scrollbar的时候,比如你的数据列表是后端获取的,这时候,初始化的时候,因为数据还没有获取到,导致里面的内容没有撑开,所以滚动条是不显示的,但是可以正常滚动,见下图 所以解决办法是在获取到列表的时候,调用一下update方法 查看源码的时候,因为scrollBar有一个update方法,所以调用这

  • 浅谈Vue.js之初始化el以及数据的绑定说明

    1.初始化el 2.数据绑定说明 3.监听值的变化 以上这篇浅谈Vue.js之初始化el以及数据的绑定说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue el-switch初始值(默认值)不能正确显示状态问题及解决

    vue el-switch初始值(默认值)不能正确显示状态问题及解决

    目录 el-switch 初始值(默认值)不能正确显示状态 使用el-switch显示状态异常 1.问题表述 el-switch 初始值(默认值)不能正确显示状态 先去检查一下接口返回格式 如果是字符串 不需要加冒号 active-value="1" inactive-value="2" 如果是数字 :active-value="1" :inactive-value="2" 使用el-switch显示状态异常 1.问题表述 v

  • 浅谈vue中子组件传值的默认值情况

    当父组件中的content值没有传入时,子组件利用default属性设置默认值,此情况时,页面会显示default value. 当传入content的值时,default属性的默认值不生效,界面显示为: 补充知识:Vue父组件向子组件传值遇到的BUG 当子组件中含有props属性,使用ref对其中的prop属性赋值时报错 Avoid mutating a prop directly since the value will be overwritten whenever the parent

  • 使用JavaBean根据指定条件设置属性值默认值方式

    目录 JavaBean根据指定条件设置属性值默认值 使用场景 使用范围 使用示例 JavaBean对象成员变量默认值及数组默认值 JavaBean根据指定条件设置属性值默认值 使用场景 当bean数据中已经装配好其他数据,在逻辑以及数据转换完成的最后一步进行数据默认值设置:如果bean的属性较少,可以手动写if条件就行了,如果bean的属性太多,你不希望写太多if的时候,这个方法是很不错的方法: 使用范围 仅限于当前类,不能给父类设置值 也是参考了其他博主的方法,做的优化和修改,由于时间过了很长

  • vue里面的el-select绑定默认值方式

    目录 vue的el-select绑定默认值 el-select绑定的值无法选中el-option问题 vue的el-select绑定默认值 vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当给select绑定了v-model的值的时候,要给v-model绑定的data值里写默认值 el-select绑定的值无法选中el-option问题 框架vue

  • vue项目打包部署后默认路由不正确的解决方案

    vue项目打包部署后默认路由不正确的解决方案

    目录 打包部署后默认路由不正确 问题描述 解决方案 vue打包后路径不对 对于背景图片不显示的问题 动画无法运行 小图标没了 打包部署后默认路由不正确 问题描述 vue项目本地开发的时候默认路由没问题,例如 redirect:"/index" 但是部署以后,服务器上默认路由不正确,现在遇到的问题是,会默认跳转到login页面,前提项目没有做路由权限. 解决方案 打开路由index.js文件,添加:base:"/" const routers = new Router

  • vue组件引用另一个组件出现组件不显示的问题及解决

    vue组件引用另一个组件出现组件不显示的问题及解决

    目录 组件引用另一个组件出现组件不显示 vue声明了一个组件,但是没有显示 组件引用另一个组件出现组件不显示 下载的一个vue构建的后台管理系统,导航栏是一个侧边栏,想在头部里面加一个导航 先是导入要使用的组件 import Hamburger from '@/components/Hamburger' import Nav from '@/components/Nav/index.vue' //自己新建的 然后在 components 里面写入该组件 components: { Hamburg

  • Java未赋值变量的初始值解析(默认值)

    目录 Java未赋值变量的初始值(默认值) 初始值(默认值) 实例变量(非静态字段) 类变量(静态字段) 本地变量 参数 解决java未赋值变量的默认值问题 如下所示 Java未赋值变量的初始值(默认值) 初始值(默认值) 参考:官方文档 Java程序中,任何变量必须初始化后才能使用. 以下为不同数据类型的默认值. 数据类型 初始值 byte 0 short 0 int 0 long 0L char 'u0000' float 0.0f double 0 boolean false 所有引用类型

  • ES6中参数的默认值语法介绍

    前言 在ES6如果函数参数没有值或未定义的,默认函数参数允许将初始值初始化为默认值.下面来看看详细的介绍吧. 语法 function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) { statements } 描述 在JavaScript中,函数默认参数定义.然而,在某些情况下,设置不同的默认值可能是有用的.这是默认参数可以帮助的地方. 在过去,设置默认值的一般策略是在函数体中测试参数值,如果它们是未定

  • C#不同类型的成员变量(字段)的默认值介绍

    创建类的一个实例时,在执行构造函数之前,如果你没有给成员变量赋初始值,C#编译器缺省将每一个成员变量初始化为他的默认值. 如果变量是方法的局部变量,编译器就会认为在使用该变量之前,代码必须给它显示的设定一个值.否则会发生"使用了未赋值的局部变量"的错误. 对于其他情况,编译器会在创建变量时,把变量初始化为默认值.1.对于整型.浮点型.枚举类型(数值型),默认值为0或0.0.2.字符类型的默认值为\x0000.3.布尔类型的默认值为false.4.引用类型的默认值为null. 如果声时变

  • 聊聊java变量的初始化之后的默认值

    聊聊java变量的初始化之后的默认值

    变量初始化后的默认值 对于类的成员变量 不管程序有没有显示的初始化,Java 虚拟机都会先自动给它初始化为默认值. 1.整数类型(byte.short.int.long)的基本类型变量的默认值为0. 2.单精度浮点型(float)的基本类型变量的默认值为0.0f. 3.双精度浮点型(double)的基本类型变量的默认值为0.0d. 4.字符型(char)的基本类型变量的默认为 "/u0000". 5.布尔性的基本类型变量的默认值为 false. 6.引用类型的变量是默认值为 null.

随机推荐