elememtUI 的switch组件默认不起效

最新推荐文章于 2025-05-15 10:11:01 发布

KeroroLX

最新推荐文章于 2025-05-15 10:11:01 发布

阅读量4.6k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： vue笔记 elementUI

本文链接：https://blog.youkuaiyun.com/github_38928905/article/details/86477737

vue笔记同时被 2 个专栏收录

35 篇文章

订阅专栏

elementUI

4 篇文章

订阅专栏

本文详细解析了在使用ElementUI的Switch组件时，如何正确处理Number类型的绑定问题，确保开关状态能按预期显示。通过调整绑定符号，解决了默认状态不正确的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

...
 <el-form-item label="是否显示：" prop="IsShow">
           <el-switch
             v-model="editForm.IsShow"
             active-color="#13ce66"
             active-value="1"
             inactive-value="0"
             active-text="是"
             inactive-text="否">
           </el-switch>
        </el-form-item>
...

editForm:{
                "IsShow":1,
              },

发现不会显示为默认的1状态，原因是上面active-value和inactive-value绑定的是string，下面的是number,所以将下面的改string类型就正常了；

那如果需要赋值isShow是number类型怎么办？

elementUI中，number类型绑定要在前面加绑定符号；

...
 <el-form-item label="是否显示：" prop="IsShow">
           <el-switch
             v-model="editForm.IsShow"
             active-color="#13ce66"
             :active-value=1
             :inactive-value=0
             active-text="是"
             inactive-text="否">
           </el-switch>
        </el-form-item>
...

editForm:{
                "IsShow":1,
              },

这种也能正常