昨天开发用到开关组件 后台返回字段是 can_write 默认是0 or 1 但是Switch 组件绑定的默认值默认是 true or false 直接绑定会导致默认是关闭状态 在页面一加载 值发生变化时 会自己调用 查了文档 需要使用 active-value 和 inactive-value 来指定绑定的数据类型
inactive-value 默认值
active-value 选中切换值
完整代码 以及它附带的事件名称
<el-switch active-value="1" inactive-value="0" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" v-if="scope.row.type == 1" v-model="scope.row.can_write" @change="handleSwitchChange(scope.row)" />
设置开关的宽度:
<el-switch v-model="switchValue" width="100px" />
设置开关的颜色:
<el-switch v-model="switchValue" active-color="#13ce66" inactive-color="#ff4949" />
禁用开关:
<el-switch v-model="switchValue" :disabled="true" />
自定义开关的文本:
<el-switch v-model="switchValue" active-text="开启" inactive-text="关闭" />