前端工作总结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表示当前列表的序号。
注:改变状态时要注意返回的状态根据状态来选择相应的写法
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!