工作150:1、根据后台传值动态显示开关状态及文字说明(0为文字,1为图标)

实施方法

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

 <template slot-scope="scope"><el-switch v-model="state"on-value="1"off-value="0"on-text="文字"off-text="图标"off-color="#20a0ff"@change="changeStatus($event,scope.row)"></el-switch>
</template>

请注意以面的写法,on-valueoff-value的值分别是字符串的1和2,如果你赋值为数字类型的 1 或 2是无法正常工作的,若赋值为数值类型,需这样写:

 <template slot-scope="scope"><el-switch v-model="state":on-value="1":off-value="0"on-text="文字"off-text="图标"off-color="#20a0ff"@change="changeStatus($event,scope.row)"></el-switch>
</template>

我们使用绑定的方式,同时@change可以传值$event就是switch的当条信息值,或者直接获取绑定的model值state,scope.row为参数,还可以再添加index表示当前列表的序号。
注:改变状态时要注意返回的状态根据状态来选择相应的写法

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/415404.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JMeter工具使用初探

工欲善其事必先利其器&#xff0c;要保证移动应用产品在上线之后能稳定运行于各种复杂环境&#xff0c;仅仅进行功能测试是远远不够的&#xff0c;压力测试越来越被应用开发商所重视。而压力测试从传统的内部压力到基于云计算的压力测试&#xff0c;再到用户视角的外部压测&…

Cannot fit requested classes in a single dex file. Try supplying a main-dex list.

Android studio 打包时报错如下&#xff1a; Cannot fit requested classes in a single dex file. Try supplying a main-dex list. # methods: 66585 > 65536 Message{kindERROR, textCannot fit requested classes in a single dex file. Try supplying a main-dex list…

使用babel7 和 nodemon 进行node项目开发

使用Babel进行开发允许我们使用一些es6语法的新特性。下面介绍简单的配置过程。 1、首先安装npm包 yarn add --dev babel/core babel/cli babel/preset-env babel/nodeyarn add --dev nodemon2、在项目中创建新文件.babelrc "presets": ["babel/preset-env&quo…

HDU1251 统计难题 trie树 简单

http://acm.hdu.edu.cn/showproblem.php?pid1251题意: 找前缀数量 裸模板 1 #include<cstdio>2 #include<cstring>3 #include<iostream>4 #include<algorithm>5 #include<cmath>6 #include<queue>7 using namespace std;8 const int maxn…

工作146:webstorm持续updating indices解决方法

现象 在应用Webstorm进行开发相关工作时&#xff0c;发现IDE一直处于updating indices状态&#xff0c;根据错误提示&#xff0c;查看项目目录中.idea\workspace.xml文件 &#xff0c;发现在进行git版本管理过程中&#xff0c;此文件进行了merge操作&#xff0c;结果导致文件…

JMeter场景设置与监控

随着IT技术的飞速发展和企业互联网业务规模不断扩张&#xff0c;IT架构经历了以数据计算为核心的C/S架构、以聚焦业务功能及服务化构建应用的经典互联网架构和如今整合IT资源和按需使用的云计算架构三个阶段。 与之同步发展的压力测试同样有三个发展阶段&#xff0c;从防火墙内…

Java 计算两个日期时间差,天数、时、分、秒

计算时间差方法 public static int getDistanceTimemin(String str1, String str2) {DateFormat df new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");Date one;Date two;long day 0;//天数差long hour 0;//小时数差long min 0;//分钟数差long second0;//秒数差try …

阿里云轻应用服务器 宝塔面板 mongodb 配置外网连接 其一 基础配置

买了一台阿里云轻应用服务器做测试&#xff0c;我默认安装的是宝塔面板&#xff0c;下面详细记录配置mongodb过程。 1、进行安装&#xff0c;通过宝塔面板自带的软件管理进行安装 2、首先需要保证外网能够进行访问 设置监听端口为0.0.0.0&#xff0c;原来的是127.0.0.1只允许…

工作151:初始登录样式

<!--GY歌谣控制登录页面的功能--> <template><div class"main"><div><h1> <img src"./geyao.png" style"width: 29px;height: 29px;margin-right: 10px;line-height: 29px" alt"">星传经管系统&l…

Dubbo超时机制导致的雪崩连接

Bug影响&#xff1a;Dubbo服务提供者出现无法获取Dubbo服务处理线程异常&#xff0c;后端DB爆出拿不到数据库连接池&#xff0c;导致前端响应时间异常飙高&#xff0c;系统处理能力下降&#xff0c;核心基础服务无法提供正常服务。 ​Bug发现过程&#xff1a; ​线 上&#xff…

云智慧压测实战分享之JMeter脚本录制实例

在前面的《云智慧压测实战分享之JMeter工具使用初探》中我们对JMeter的功能特点和常用元件做了简单介绍&#xff0c;接下来说说JMeter的脚本录制。JMeter有多种录制脚本方法&#xff0c;其中最常见的是通过第三方工具Badboy录制&#xff0c;另外还有JMeter自身设置(Http代理服务…

阿里云轻应用服务器 宝塔面板 mongodb 配置外网连接 其二 配置账号密码

其一的设置&#xff0c;不需要通过账号密码&#xff0c;就能直接访问数据库&#xff0c;安全性堪忧&#xff0c;我之前就踩过坑&#xff0c;也在之前的文章中讲过&#xff0c;这次用阿里云轻应用服务器重新介绍一波。 命令行窗口可以直接通过阿里云轻应用服务器里面自带的。 1、…

各种Span设置

备注&#xff1a;各种Span设置 &#xff08;转自http://blog.csdn.net/harvic880925/article/details/38984705 &#xff09; 在前面的一个小示例&#xff0c;大家应该也可以看出&#xff0c;要应用一个Span总共分三步&#xff1a; 1、构造String 2、构造Span 3、利用SetSpan…

工作152:阅读之后台管理登录样式

<template><div class"login-wrap"><div class"ms-login"><div class"ms-title">后台管理系统</div><el-form :model"param" :rules"rules" ref"login" label-width"0px&q…

(Oracle)关于blob转到目标库报ORA-01461: 仅能绑定要插入 LONG 列的 LONG 值错误解决方案...

在数据抽取时&#xff0c;开发需要clob类型的数据&#xff0c;但是目标库类型是blob类型的&#xff0c;于是抽取的时候报错&#xff1a; ORA-01461: 仅能绑定要插入 LONG 列的 LONG 值错误 可能有以下几种原因&#xff1a; 可能有以下几种原因&#xff1a; 1、插入到字符串长度…

接口测试到底是什么?如何制造接口数据

接口测试其实很难界定,我之前理解接口测试虽然算不上白盒测试,但也至于黑河测试.后来跟我们一开发聊天,他说接口测试其实就是白盒的一部分.后来又跟一阿里的大数据聊,他说接口测试属于&#xff08;黑盒测试&#xff09;功能测试,好吧&#xff0c;无所谓啥测试了.接口一般就是看…

Support for the experimental syntax 'dynamicImport' isn't currently enabled

在研究vue代码中动态加载组件遇到这样的问题&#xff0c;记录解决方法&#xff1a; 1、安装babel/plugin-syntax-dynamic-import yarn add babel/plugin-syntax-dynamic-import2、.babelrc中配置 {"plugins": ["babel/plugin-syntax-dynamic-import"] }…

工作153:position使用

① static 默认 静态 正常文档流 ② relative 相对 不脱离文档流 只改变自身位置 ③ absolute 绝对 相对于最近仅为的父元素 脱离文档流 ④ fixed 固定 相对于浏览器窗口 脱离文档流

JSTL之数字、日期格式化fmt:formatNumber/、fmt:formatDate/

http://blog.csdn.net/evangel_z/article/details/8281919转载于:https://www.cnblogs.com/hougebajie/p/7799369.html

div中图片下方有边距

遇到一个小问题&#xff0c;记录一下。 1、问题描述 <div class"thumb-box"><img class"tt-img" src"https://cdn.w7.cc/images/2017/11/09/15102068385a03ed7644fbf_OxLCy7ypXKpd.png?imageView2/5/w/88/h/88/format/png" alt"…