Element中switch绑定值为数字
文章描述：
switch开关经常用在是否启用的场合，但是switch默认绑定值的类型是布尔类型，即true和false，在实际的项目中，后端的接口都会用0和1来代替，如何将数值与状态进行关联呢？
基础用法
<template>
<div class="container">
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</div>
</template>
<script>
export default {
data() {
return {
value: true
}
}
}
</script>
active-value绑定要启用状态的值，用inactive-value绑定禁用状态的值，这两个值默认对应的是字符串类型。
<el-table-column label="是否启用">
<template slot-scope="obj">
<el-switch
v-model="obj.row.status"
active-color="#13ce66"
inactive-color="#cccccc"
active-value="1"
inactive-value="0"
@change="changeStatus(obj.row.id)"
>
</el-switch>
</template>
</el-table-column>如果接口返回的status是数字类型的，需要加上动态绑定，代码如下：
<el-table-column label="是否启用">
<template slot-scope="obj">
<el-switch
v-model="obj.row.status"
active-color="#13ce66"
inactive-color="#cccccc"
:active-value="1"
:inactive-value="0"
@change="changeStatus(obj.row.id)"
>
</el-switch>
</template>
</el-table-column>属性
| 参数 | 说明 |
|---|---|
| active-text | switch 打开时的文字描述 |
| inactive-text | switch 关闭时的文字描述 |
| active-value | switch 打开时的值 |
| inactive-value | switch 关闭时的值 |
| active-color | switch 打开时的背景色 |
| inactive-color | switch 关闭时的背景色 |
事件
| change | switch 状态发生变化时的回调函数 |
发布时间：2023/11/02
发表评论