element-ui switch
<el-tooltip :content="'Switch value: ' + value" placement="top">
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="100"
inactive-value="0">
</el-switch>
</el-tooltip> <script>
export default {
data() {
return {
value: '100',
}
}
};
</script>
设置active-value
和inactive-value
属性,接受Boolean
, String
或Number
类型的值。
一般前后台关联场景使用情况下,注意inactive-value属性的参数类型。
比如后台返回int 类型,那么inactive-value的值就不能在前台加双引号,这样会引起类型错误,错误将会引起按钮不按实际情况控制。
<el-tooltip :content="'Switch value: ' + value" placement="top">
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
:active-value=activevalue
inactive-value=iactivevalue>
</el-switch>
</el-tooltip> <script>
export default {
data() {
return {
value: '100',
activevalue:100,
iactivevalue:0
}
}};
</script>
假设后台返回值是string类型,如果没进行任何转换,那么给
activevalue赋值时将会失败,按钮不会被启动
element-ui switch的更多相关文章
- element UI table 过滤 筛选问题
一.问提描述 使用elementUI table 官方筛选案例,发现筛选不是服务器端筛选,而是浏览器端对每一页进行单独筛选. 如何在服务器端筛选? 二.查询Element UI 官网table组 ...
- vue实现多语言国际化(vue-i18n),结合element ui、vue-router、echarts以及joint等。
老板说我们的项目要和国际接轨,于是乎,加上了多语言(vue-i18n).项目用到的UI框架是element ui ,后续echarts.joint等全都得加上多语言. 一.言归正传,i18n在vue项 ...
- vue Cli 按需引入Element UI 和全局引用Element UI
全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...
- 使用element ui 日期选择器获取值后的格式问题
一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep :: GMT+ (中国标准时间) 在官 ...
- element ui 1.4 升级到 2.0.11
公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...
- [坑况]饿了么你是这样的前端——vue+element ui 【this dependency was not found:'element-ui/lib/theme-chalk/index.css'】
element ui 坑况:今日pull代码,潇洒npm run dev ,被告知:this dependency was not found:'element-ui/lib/theme-chalk/ ...
- Vue + Element UI项目初始化
1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...
- Element UI——本地引入iconfont不显示
前言 前面因为本地引入Element UI导致了iconfont不显示,所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台,找到 ...
- Html | Vue | Element UI——引入使用
前言 做个项目,需要一个效果刚好Element UI有,就想配合Vue和Element UI,放在tp5.1下使用,但是引入在线的地址各种报错,本地引入就完美的解决了问题! 代码 __STATIC_J ...
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
随机推荐
- Ginan-PEA例程下载
输入以下命令可在Ubuntu系统中进行下载,但受到网络限制并不能有效下载或者下载很慢 python3 scripts/download_examples.py 通过阅读python脚本,可将下载网址拷 ...
- Install Argo Workflows
Install Argo Workflows Release v3.4.3 · argoproj/argo-workflows (github.com) CLI # Download the bina ...
- skype网络异常无法登录
在有些win7电脑上安装最新版skype软件后,打开skype软件后显示无法访问网络 检查网络及防火墙,确定无异常 最后排查原因定位到操作系统的根证书 发现系统缺少部分DigiCert的根证书 从其他 ...
- JSP图书管理系统
allbook.jsp pageEncoding="UTF-8"%> <%@ page import = "java.util.*" %> & ...
- Windows系统的显示器校正
莫名其妙的显示器显示的内容整体向上偏移,导致一些页面在最大化窗口时,看不见页面的标题,及操作按钮,如页面的关闭,缩小按钮. 解决方法:点击显示器下方的menu按钮,找到 设定 选项,再选择 复位 即可 ...
- laravel service provider 1
可以理解成分两步: 配置.register, 因为只有配置了才有被调用去register, 也许不配置直接在appserviceProvider里面可以直接生效.... service: 具体工作的类 ...
- IT部门一线主管要如何才能对员工的某项工作的时间和难度评估心里有数?
自己去处理一些棘手的问题,并趁此机会了解系统的逻辑,评估复杂度,是复杂度,不是具体的内容,然后把这个印象记住. 定一个需求,请员工去做,看看完成到底需要多久,在做的过程中或者做完之后,跟他讨论实现的过 ...
- 执行celery --version报错
python 3.7.4安装celery后执行celery --version报错 安装命令: pip install celery -i https://pypi.douban.com/simple ...
- 记录解决方案(sqlserver篇)
一个月的补卡次数不超过三次(即统计一个月内某人的补卡次数) 表结构是某人一天内的四次打卡状态,这样是统计当月补卡的天数了(错误) select count(*) from [Proc_HR_Punch ...
- 【STM32】电能表抄表功能实现|自学笔记
一.抄表的原理 抄表就是读电能表的测量参数,一般有电能,电压,电流,实时功率,功率因数等,用单板抄表其实就是读电能表种相应寄存器中的值.智能电表目前主流协议有DLT645国标各家通用,MODBUS各家 ...