Saul's blog Saul's blog
首页
后端
分布式
前端
更多
分类
标签
归档
友情链接
关于
GitHub (opens new window)

Saul.J.Wu

立身之本,不在高低。
首页
后端
分布式
前端
更多
分类
标签
归档
友情链接
关于
GitHub (opens new window)
  • React

  • Vue

    • Element-UI 级联选择框回显问题
    • Element-UI中El-Select的坑
    • Element UI中Switch 开关的小坑,如何使用0和1或其他?
      • 错误示范:
      • 解决方法
    • Vue,计算属性VS监听属性,到底用哪个?
    • vue项目搭建过程
  • 前端
  • Vue
SaulJWu
2020-07-12

Element UI中Switch 开关的小坑,如何使用0和1或其他?

前言

根据后台传值动态显示开关(0为关,1为开),其绑定字段是scope.row.handAddStatus

Swich默认是boolean类型,而后台传值 为number类型,这个时候我想用number来取代boolean类型

# 错误示范:

<el-switch v-model="scope.row.handAddStatus"
                           active-value="1"
                           inactive-value="0"
                           disabled
                           active-color="#13ce66"
                           inactive-color="#ff4949">
                </el-switch>

1
2
3
4
5
6
7
8

很明显实现不了,为什么?

active-value和inactive-value的值分别是字符串的1和2 如果你赋值为数字类型的 1 或 2是无法正常工作的

# 解决方法

若赋值为数值类型,需这样写:

<el-switch v-model="scope.row.handAddStatus"
                           :active-value="1"
                           :inactive-value="0"
                           disabled
                           active-color="#13ce66"
                           inactive-color="#ff4949">
                </el-switch>
1
2
3
4
5
6
7

看到区别了嘛,原来active-value和inactive-value的前面,要加分号,才能识别是数字类型

那么以后我需要记住,字符串直接赋值,而数字类型要加;

帮我改善此页面 (opens new window)
#前端#vue#Element-UI
上次更新: 2021/02/16, 12:29:08
Element-UI中El-Select的坑
Vue,计算属性VS监听属性,到底用哪个?

← Element-UI中El-Select的坑 Vue,计算属性VS监听属性,到底用哪个?→

最近更新
01
zabbix学习笔记二
02-28
02
zabbix学习笔记一
02-10
03
Linux访问不了github
12-08
更多文章>
Theme by Vdoing | Copyright © 2020-2022 Saul.J.Wu | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式