首先介绍后台传过来的数据为1或0;1为开启,0为关闭,页面可以操作修改状态按钮
接下来就掉坑里了,ele可以设置active-value和inactive-value属性,接受Boolean, String或Number类型的值。
<el-switch active-value='1'
inactive-value='0'
v-model="form.status"
active-color="#13ce66"
inactive-color="#ff4949"
></el-switch>
以上是最开始的代码,结果肯定是不行的,为了做测试页面也打印了statu的值,即使值传过来的是1,switch也是0的状态,而且打印的statu的值也是0。
测试多个可能性之后开始网上找教程,找到了下面这片文章
Vue Element的el-switch组件使用总结(https://www.linjiaqun.com/js/268.html)
确定了传过来的数据是number后,做了如下修改
<el-switch
:active-value='1'
:inactive-value='0'
v-model="form.status"
active-color="#13ce66"
inactive-color="#ff4949"
></el-switch>