vue el-switch初始值(默认值)不能正确显示状态问题及解决
导读：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="状态" >
<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);
}
}
打印结果
以上为个人经验 ，希望能给大家一个参考 ，也希望大家多多支持本站 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！