ElementPlus Switch 开关基础使用

CV工程师!!

已于 2023-10-11 11:54:40 修改

阅读量781

点赞数 1

分类专栏： Element-Plus 小tips 文章标签： vue.js javascript 前端

于 2023-10-11 11:51:43 首次发布

本文链接：https://blog.csdn.net/m0_65607651/article/details/133764675

版权

Element-Plus 小tips 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

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