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封装一个右键菜单组件详解(复制粘贴即可使用)
关于vue项目中会出现一些需求,就是右键菜单项的功能实现,下面这篇文章主要给大家介绍了关于vue封装一个右键菜单组件(复制粘贴即可使用)的相关资料,需要的朋友可以参考下
2022-12-12
vuex(vue状态管理)的特殊应用案例分享
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
2020-03-03
vue-router权限控制(简单方式)
这篇文章主要介绍了vue-router权限控制(简单方式)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
vue基于element的区间选择组件
这篇文章主要介绍了vue基于element的区间选择组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
vue2实现provide inject传递响应式
在看element-ui的源码的时候，注意到源码里面有很多地方使用provide和inject的属性，本文主要介绍了vue2实现provide inject传递响应式，分享给大家，感兴趣的可以了解一下
2021-05-05
Vue2响应式系统之set和delete
这篇文章主要介绍了Vue2响应式系统之set和delete，通过为对象收集依赖，将对象、数组的修改、删除也变成响应式的了，同时为用户提供了和方法，下文详细介绍需要的朋友可以参考一下
2022-04-04
vue项目中按需引入element-ui的正确实现方法
这篇文章主要介绍了vue项目中按需引入element-ui的正确实现方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
Vue中的baseurl如何配置
这篇文章主要介绍了Vue中的baseurl如何配置问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
Vue状态管理之使用Pinia代替Vuex
这篇文章主要介绍了Vue状态管理。下面文章主要围绕着使用Pinia代替Vuex的相关资料展开具体内容,需要的朋友可以参考一下，希望对你有所帮助
2021-11-11
Vue学习之组件用法实例详解
这篇文章主要介绍了Vue学习之组件用法,结合实例形式分析了vue.js组件的使用流程、模板、父子组件、插槽slot等相关原理与操作技巧,需要的朋友可以参考下
2020-01-01