ElementPlus Switch 开关基础使用

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

设置开关的宽度：


设置开关的颜色：


禁用开关：


自定义开关的文本：