ElementPlus Switch 开关基础使用

CV工程师!!2023-10-15 8:48

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