厦门市建设管理协会网站首页网络服务有限公司

昨天开发用到开关组件  后台返回字段是 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="关闭" />