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

更新时间：2022年10月22日 15:03:29 作者：Acitylion

这篇文章主要介绍了vue el-switch初始值(默认值)不能正确显示状态问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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

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

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

如果是数字

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

使用el-switch显示状态异常

问题表述

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);
    }
}

打印结果

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

您可能感兴趣的文章:

Vue 列表渲染 key的原理和作用详解
这篇文章主要介绍了key在Vue列表渲染时的原理和作用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-10-10
vue.js实现的绑定class操作示例
这篇文章主要介绍了vue.js实现的绑定class操作,结合实例形式分析了vue.js绑定class常见的3种操作技巧,需要的朋友可以参考下
2018-07-07
详解Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）
这篇文章主要介绍了Vue+Element动态表单动态表格，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
vue实现的双向数据绑定操作示例
这篇文章主要介绍了vue实现的双向数据绑定操作,结合完整实例形式较为详细的分析了vue.js进行数据双向绑定操作的常见实现方法与相关操作技巧,需要的朋友可以参考下
2018-12-12
教你用Cordova打包Vue项目的方法
这篇文章主要介绍了教你用Cordova打包Vue项目的方法，详细的介绍了如何Vue项目打包成app，具有一定的参考价值，有兴趣的可以了解一下
2017-10-10
vue interceptor 使用教程实例详解
本文通过实例代码给大家介绍了vue interceptor 使用,需要的朋友可以参考下
2018-09-09
Vue3中的Fragment使用方法详解
Fragment 是 Vue 3 中的新特性,允许一个组件模板返回多个根节点,与传统方式不同,不再需要一个额外的 DOM 元素来包裹所有内容,本文将详细介绍 Fragment 的概念、使用场景、优点以及可能遇到的问题,需要的朋友可以参考下
2024-08-08
Vue组件生命周期运行原理解析
这篇文章主要介绍了Vue组件生命周期运行原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-11-11
Element Plus 日期选择器获取选中的日期格式(当前日期/时间戳格式）
如果想要获取选中的日期时间就需要通过,Element Plus 日期选择器 format属性和value-format属性,format指定输入框的格式,value-format 指定绑定值的格式,本篇文章就给大家介绍Element Plus 日期选择器获取选中的日期格式(当前日期/时间戳格式）,感兴趣的朋友一起看看吧
2023-10-10
Vue组件之自定义事件的功能图解
本文通过图文并茂的形式给大家介绍了Vue组件之自定义事件的功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2018-02-02