背景:

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

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 chunk_split()函数 语法

    php chunk_split()函数 语法 作用:把字符串分割为一连串更小的部分.东莞大理石平板 语法:chunk_split(string,length,end) 参数: 参数 描述 string ...

  2. JS中数据结构之集合

    集合(set)是一种包含不同元素的数据结构.集合中的元素称为成员.集合的两个最重要特性是:首先,集合中的成员是无序的:其次,集合中不允许相同成员存在.当你想要创建一个数据结构用来保存一些独一无二的元素 ...

  3. Windows Server服务器之用户界面,任务管理器等

    用户界面简化服务器管理.跟Windows 8一样,重新设计了服务器管理器,采用了Metro界面(核心模式除外).在这个Windows系统中,PowerShell已经有超过2300条命令开关(Windo ...

  4. 安装maven之后,cmd提示mvn不是内部命令的解决办法

    1.maven的安装教程 下载地址为:http://maven.apache.org/download.cgi 进入此页面之后 点击下载,然后解压,我把目录名改为maven,目录结构如下图所示 下面我 ...

  5. SQL 关键字的使用顺序

    1.查询中用到的关键词主要包含六个,并且他们的顺序依次为 select --> from --> where --> group by --> having --> or ...

  6. JAVA中STL使用

    Vector:和c++的vector使用方法类似. Vector<Integer> vec=new Vector<> (); ArrayList:Java.util.Array ...

  7. Docker容器数据卷volumes-from

    定义4个终端: 终端host终端container dc01终端container dc02终端container dc03各个容器之间的关系: 1.启动一个父容器dc01启动一个父容器dc01,并在 ...

  8. Windows 08R2 IIS网站架设

    目录 目录 配置和安装IIS 环境设置 安装IIS服务器 网站的站点目录和欢迎页面 配置和安装IIS IIS是Windows的网站服务器,所以配置IIS服务的前提是需要一个网址.和DNS域名并添加主机 ...

  9. django-2-目录结构

    django是MVC或者叫MTV框架

  10. Java并发AtomicReference类

    java.util.concurrent.atomic.AtomicReference类提供了可以原子读取和写入的底层对象引用的操作,还包含高级原子操作. AtomicReference支持对底层对象 ...