js事件---同一个事件实现全选与反选功能
背景:
点击头部按钮,实现全选与反选功能
1.绑定事件,把当前勾选状态传递给方法 $event
<el-checkbox v-model="ModelCheckAll" class="ft" @change="CheckAll($event)">选择全部</el-checkbox>
2.定义事件
CheckAll($event) {
//判断,如果为选中状态,把tick的值全部赋值为true
if ($event) {
for (let i = ; i < this.StepsListData.length; i++) {
this.StepsListData[i].tick = true //实现全选
}
} else { //如果不是全选状态
for (let i = ; i < this.StepsListData.length; i++) {
if (this.StepsListData[i].tick == true) { //就判断当前的tick值是否等于true //实现全选的切换
this.StepsListData[i].tick = false
} else if (this.StepsListData[i].tick == false) {
this.StepsListData[i].tick = true
}
}
}
},
数组结构:
如果只需要实现全选功能:
<el-checkbox v-model="ModelCheckAll" class="ft" @change="CheckAll">选择全部</el-checkbox>
for (let i = ; i < this.StepsListData.length; i++) {
this.StepsListData[i].tick = true //实现全选
}
js事件---同一个事件实现全选与反选功能的更多相关文章
- Delphi实现DBGrid全选和反选功能
Delphi实现Dbgrid全选和反选.清除全选的功能,不管是在Delphi下,还是在WEB开发中,这种功能都是很实用的,是进行数据批量操作的基础.本模块就是实现了为Delphi的DBGrid数据列表 ...
- 原生js中实现全选和反选功能
<!DOCTYPE html> <html> <head lang="en"> <meta char ...
- js实现表单项的全选、反选以及删除操作
<html> <head> <title>test</title> <script language="javascript" ...
- jQuery实现复选框的全选、反选功能
<ul id="list"> <li><label><input type="checkbox" value=&quo ...
- [原]vue实现全选,反选
用vue写业务代码时候,后端大神丢给我一堆数据,要求是做全选,反选功能,然后把用户更改的数据全部返回给他 基本思路 如果父级选中了,那么父级下面的子集全部选中checked=true; 如果子集中选中 ...
- 复选框全选、反选及根据值JS控制复选框默认选中事件
HTML代码 <div class="col-sm-7"> <input type="checkbox" id="allAndNot ...
- JS实现全选、反选、不选
JS实现全选.反选.不选 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- js及jQuery实现checkbox的全选、反选和全不选
html代码: <label><input type="checkbox" id="all"/>全选</label> < ...
- html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- PHP curl_multi_exec函数
curl_multi_exec — 运行当前 cURL 句柄的子连接 说明 int curl_multi_exec ( resource $mh , int &$still_running ) ...
- [杂题]:C/c(二分答案)
题目传送门(内部题54) 输入格式 第一行一个整数表示$n$.第二行$n$个整数表示初始序列.(这行原题没有,是我加的)接下来$2n$行每行两个整数,分别表示$X_i,Y_i$.数据保证至少存在一种方 ...
- 使用xorm将结构体转为sql文件
操作步骤 (1)定义结构体 type User struct { Id int //表id Name string //姓名 ...}12345(2)编写代码,执行自动增量同步(mysql为例) im ...
- socket 接收和发送缓冲区
问题产生: 在进行客户端向服务端发送数据时,每次发送一定数量数据后发送端就等不到send函数的返回,导致程序一直卡死在send函数. 通过抓包发现:发送端发送过快而接收端处理速度过慢,导致快速发送一定 ...
- mysql 查询结果增加自动递增的一列,排名,排序
mysql中有时候需要对查询的结果排序,比如根据成绩获取排名信息等,需要增加一个自增的列,也就是排名信息 ; as sortid FROM a; 如果不支持写两条sql,可以用以下写法合成一条sq ...
- spring boot 尚桂谷学习笔记10 数据访问02 mybatis
数据访问 mybatis 创建一个 springboot 工程,模块选择 sql 中 mysql(数据驱动), jdbc(自动配置数据源), mybatis Web模块中选择 web pom 引入: ...
- Modify PDF operators.
1 Depart Process: 2 1. Grep xref and trailer binary position in file. 3 2. Dump xref table and trail ...
- ZwQueryDirectoryFile用法
1. 当返回值为STATUS_SUCCESS时,返回的字节数保存在IoStatusBlock.Information字段中: 2. 如果FileName字段被指定了,那么对于同时指定的FileHand ...
- 干货 | Bokeh交互式数据可视化快速入门
Bokeh简介 Bokeh是一款交互式可视化库,在浏览器上进行展示. Bokeh可以通过Python(或其它语言),快速便捷地为大型流数据集提供优雅简洁的高性能交互式图表. 安装 在python中有多 ...
- 兼容ie浏览器的方法
让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,f ...