背景:

  点击头部按钮,实现全选与反选功能

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事件---同一个事件实现全选与反选功能的更多相关文章

  1. Delphi实现DBGrid全选和反选功能

    Delphi实现Dbgrid全选和反选.清除全选的功能,不管是在Delphi下,还是在WEB开发中,这种功能都是很实用的,是进行数据批量操作的基础.本模块就是实现了为Delphi的DBGrid数据列表 ...

  2. 原生js中实现全选和反选功能

    <!DOCTYPE html>      <html>      <head lang="en">          <meta char ...

  3. js实现表单项的全选、反选以及删除操作

    <html> <head> <title>test</title> <script language="javascript" ...

  4. jQuery实现复选框的全选、反选功能

    <ul id="list"> <li><label><input type="checkbox" value=&quo ...

  5. [原]vue实现全选,反选

    用vue写业务代码时候,后端大神丢给我一堆数据,要求是做全选,反选功能,然后把用户更改的数据全部返回给他 基本思路 如果父级选中了,那么父级下面的子集全部选中checked=true; 如果子集中选中 ...

  6. 复选框全选、反选及根据值JS控制复选框默认选中事件

    HTML代码 <div class="col-sm-7"> <input type="checkbox" id="allAndNot ...

  7. JS实现全选、反选、不选

    JS实现全选.反选.不选 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  8. js及jQuery实现checkbox的全选、反选和全不选

    html代码: <label><input type="checkbox" id="all"/>全选</label> < ...

  9. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. PHP curl_multi_exec函数

    curl_multi_exec — 运行当前 cURL 句柄的子连接 说明 int curl_multi_exec ( resource $mh , int &$still_running ) ...

  2. [杂题]:C/c(二分答案)

    题目传送门(内部题54) 输入格式 第一行一个整数表示$n$.第二行$n$个整数表示初始序列.(这行原题没有,是我加的)接下来$2n$行每行两个整数,分别表示$X_i,Y_i$.数据保证至少存在一种方 ...

  3. 使用xorm将结构体转为sql文件

    操作步骤 (1)定义结构体 type User struct { Id int //表id Name string //姓名 ...}12345(2)编写代码,执行自动增量同步(mysql为例) im ...

  4. socket 接收和发送缓冲区

    问题产生: 在进行客户端向服务端发送数据时,每次发送一定数量数据后发送端就等不到send函数的返回,导致程序一直卡死在send函数. 通过抓包发现:发送端发送过快而接收端处理速度过慢,导致快速发送一定 ...

  5. mysql 查询结果增加自动递增的一列,排名,排序

      mysql中有时候需要对查询的结果排序,比如根据成绩获取排名信息等,需要增加一个自增的列,也就是排名信息 ; as sortid FROM a; 如果不支持写两条sql,可以用以下写法合成一条sq ...

  6. spring boot 尚桂谷学习笔记10 数据访问02 mybatis

    数据访问 mybatis 创建一个 springboot 工程,模块选择 sql 中 mysql(数据驱动), jdbc(自动配置数据源), mybatis Web模块中选择 web pom 引入: ...

  7. Modify PDF operators.

    1 Depart Process: 2 1. Grep xref and trailer binary position in file. 3 2. Dump xref table and trail ...

  8. ZwQueryDirectoryFile用法

    1. 当返回值为STATUS_SUCCESS时,返回的字节数保存在IoStatusBlock.Information字段中: 2. 如果FileName字段被指定了,那么对于同时指定的FileHand ...

  9. 干货 | Bokeh交互式数据可视化快速入门

    Bokeh简介 Bokeh是一款交互式可视化库,在浏览器上进行展示. Bokeh可以通过Python(或其它语言),快速便捷地为大型流数据集提供优雅简洁的高性能交互式图表. 安装 在python中有多 ...

  10. 兼容ie浏览器的方法

    让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法   最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,f ...