后台使用int类型传状态status的值
![](https://i-blog.csdnimg.cn/blog_migrate/5a16f408afe47c16264471cc29a0e416.png)
但是前端列表展示的开关状态是未开启,实际上,后台传的都是开启的状态
![](https://i-blog.csdnimg.cn/blog_migrate/a62cbe7a0b2d01022649a1f24fc3fdde.png)
结果应该是这样
![](https://i-blog.csdnimg.cn/blog_migrate/26484a22732dfbf67c5d10ac08ec0efd.png)
确定后台传的status值 在 el-switch 标签中是否使用了正确的值判断,比如 后台用的是字符串、布尔 或者是 数值类型,以及对应的值是否和 active-value、inactive-value 对应上了。
以下是el-switch 对字符串和数值型数据的不同处理:
1. 字符串传值,属性前无冒号 active-value="0" inactive-value="1"
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.tb_robot_status" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="状态 string传值" align="center" width="100" prop="status">
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
active-value="0"
inactive-value="1"
@change="handleStatusChange(scope.row)"
></el-switch>
</template>
</el-table-column>
![](https://i-blog.csdnimg.cn/blog_migrate/72f74aa81c70a9bd962876c634fe9613.png)
如果后台使用的是int值 但是el-switch没有加冒号,则会导致开关状态显示异常:
![](https://i-blog.csdnimg.cn/blog_migrate/a62cbe7a0b2d01022649a1f24fc3fdde.png)
2. 数值(int等)传值,属性前加冒号 :active-value="0" :inactive-value="1"
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.tb_robot_status" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="状态 int传值" align="center" width="100" prop="status">
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
:active-value="0"
:inactive-value="1"
@change="handleStatusChange(scope.row)"
></el-switch>
</template>
</el-table-column>
![](https://i-blog.csdnimg.cn/blog_migrate/18d362366732ff4595a335ac6f8a0e01.png)
![](https://i-blog.csdnimg.cn/blog_migrate/26484a22732dfbf67c5d10ac08ec0efd.png)
el-switch 的其他属性
![](https://i-blog.csdnimg.cn/blog_migrate/8c61e2ca4188ae13276116c13b931577.png)
示例
<el-table-column label="状态" align="center" width="100" prop="status">
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
:active-value="0"
:inactive-value="1"
active-text="开"
inactive-text="关"
@change="handleStatusChange(scope.row)"
></el-switch>
</template>
</el-table-column>
![](https://i-blog.csdnimg.cn/blog_migrate/909e958be581f760cabc089d1715450b.png)
参考: