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);
}
}
打印结果