vue element-ui列表中el-switch 开关,使用0和1
需求说明
1、根据后台传值动态显示开关(0为关,1为开)
2、对开关进行操作时请求后台,需要传两个参数:ID,State
需求描述
我先说我的需求,我想在列表的每一条添加一个开关,可以改当前一条数据的状态,并发送到服务端,并根据服务端返回的结果局部刷新当前一条数据
期望结果
已读和未读是后端返回给我的状态,分别是1和2,我先点击switch发送给后端这条数据的id,然后修改这一条数据的状态,而不是重新拿这个列表,如果后端返回失败的情况这个switch不做改变
解决方法
Swich默认是boolean类型,而后台传值 为number类型,这个时候我们想用number来取代boolean类型;
<el-switch v-model="state"
active-value="1"
inactive-value="2">
</el-switch>
请注意以面的写法,active-value和inactive-value的值分别是字符串的1和2,如果你赋值为数字类型的 1 或 2是无法正常工作的,若赋值为数值类型,需这样写:
<el-switch v-model="state"
:active-value="1"
:inactive-value="2"
@change=chang($event,state)>
</el-switch>
我们使用绑定的方式,同时@change可以传值$event就是switch的当条信息值,state为参数,还可以再添加index表示当前列表的序号
实战(上代码)
这里是方法引用和参数传递(参数包括:当前的状态 $event、当前数据的值对象scope.row、当前的序号scope.$index)
下面shopUpdata 是一个ajax请求,只是提交数据用的,跟本文说的知识点没有关系,如果报错了,就注释掉shopUpdata方法或者换成你自己的ajax请求。
vue element-ui列表中el-switch 开关,使用0和1相关推荐
- 在Vue+Element ui 项目中如何使用iconfont(阿里图标库)中的图标
在项目过程中,element ui 中自带的图标往往满足不了自己的需求,那么如何在项目中使用iconfont的图标呢? 在iconfont中新建一个项目 找到自己想要的图标,加入购物车,加入完成后点击 ...
- Vue+element ui 表格中时间选择器范围控制(两种方式)
1.页面 <el-table v-loading="loading" :data="tableList" border> <!-- 方法1 - ...
- vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
- 【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Table表格增删查改、Pagination分页、搜索框
文章目录 目标 代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式 总 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Form表单填写、Dialog对话框弹出
文章目录 目标 代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
- nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
- bind-html自动换行,vue element ui this.$alert 样式修改,长词自动换行、自定义htm
vue element ui this.$alert 样式修改,长词自动换行.自定义htm vue element ui this.$alert 样式修改,长词自动换行.自定义html标签无效果 问题 ...
- 基于Vue+Element UI+Node+MongoDB的医院门诊预约挂号系统
目录 概述 3 系统目标 3 需求分析 3 功能需求 3 非功能需求 4 设计 4 数据库设计 4 数据库说明 4 数据结构 4 接口设计 5 登录 5 注册.添加信息 6 查询信息 6 查询全部病人 ...
最新文章
- Java字符串处理技巧
- php和java语言_JAVA语言和PHP语言的比较
- svn文件重进更改服务器路径,svn 设置 服务器路径
- 单例模式中的属性实现
- python输出读取的空格数目_Python 3基础教程: 输入和输出具体代码实例
- c# 赋值运算符_C#程序演示赋值运算符的示例
- 深度学习自学(十一):Aborted at 1558257386 (unix time)
- 年轻时不多闯闯,老了拿什么来吹
- bfs和dfs:poj2386和leetcode130
- windowsxp安装python什么版本合适_XP系统安装Python,python
- 利用python自动发送邮件(无敌详细讲解版)
- 修改加入SGE集群某队列里各个执行机的cpu数(slots)
- 怎么关闭win10虚拟机服务器,如何关闭Win10自带虚拟机?三种关闭Win10专业版系统hyper-v虚拟机的方法...
- 2021年,从事数据分析行业前景如何?还能转行数据分析师吗?(下)
- 抗混叠滤波器 - 差分输入ADC的前端抗混叠RC滤波器设计实现
- jetson-nano环境查询
- JSON--JSON学习入门(了解什么是JSON)
- [kubernetes]-挂载nfs出错排查
- JavaScript中shift() 方法
- ios 6 beta试用记录