前端工作总结141-根据后台传值动态显示开关状态及文字说明(0为文字,1为图标)

简介: 前端工作总结141-根据后台传值动态显示开关状态及文字说明(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-value和off-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表示当前列表的序号。

注:改变状态时要注意返回的状态根据状态来选择相应的写法

相关文章
|
1月前
|
前端开发 JavaScript 数据安全/隐私保护
推荐6款超级好看的开源中后台前端框架
推荐6款超级好看的开源中后台前端框架
57 0
|
5月前
|
前端开发
【前端统计图】hcharts实现堆叠柱形图(与后台数据交互)
【前端统计图】hcharts实现堆叠柱形图(与后台数据交互)
31 0
|
3月前
|
前端开发 JavaScript 关系型数据库
若依框架------后台路由数据是如何转换为前端路由信息的
若依框架------后台路由数据是如何转换为前端路由信息的
109 0
|
7月前
|
JSON 前端开发 JavaScript
前端(十七)——gitee上开源一个移动端礼盒商城项目(前端+后台)
前端(十七)——gitee上开源一个移动端礼盒商城项目(前端+后台)
|
6月前
|
前端开发 Java 程序员
Spring Boot+Netty+Websocket实现后台向前端推送信息
学过 Netty 的都知道,Netty 对 NIO 进行了很好的封装,简单的 API,庞大的开源社区。深受广大程序员喜爱。基于此本文分享一下基础的 netty 使用。实战制作一个 Netty + websocket 的消息推送小栗子。
|
3月前
|
监控 小程序 前端开发
C#医院预约挂号小程序源码(前端+后台)
线上预约挂号系统构建了医院和患者的连接,通过改善患者院内的就医服务流程,以微信公众号、支付宝小程序为患者服务入口,为居民提供导诊、预约、支付、报告查询等线上线下一体化的就医服务,缩短患者就诊环节,提高医疗机构服务效率。
84 0
|
8月前
|
前端开发
前端项目实战捌拾肆react-admin+material ui-踩坑-material ui Typography铸排文字
前端项目实战捌拾肆react-admin+material ui-踩坑-material ui Typography铸排文字
26 0
|
8月前
|
前端开发
前端学习笔记202305学习笔记第二十三天-区域文字和立体设置
前端学习笔记202305学习笔记第二十三天-区域文字和立体设置
31 0
|
4月前
|
小程序 前端开发 JavaScript
java后台restTemplate生成二小程序维码,前端渲染
java后台restTemplate生成二小程序维码,前端渲染
|
18天前
|
前端开发 API
【读书后台管理系统】—前端框架搭建(一)
【读书后台管理系统】—前端框架搭建(一)