背景:

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

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. [CSP-S模拟测试73]题解

    A.小P的2048 作为一个看B哥玩了一个寒假的人这种题闭眼切好吧 模拟即可.程序模块化后直接复制粘贴. 说什么模拟不能复制粘贴的都没水平 #include<cstdio> #includ ...

  2. 20175126《Java程序设计》第十周学习总结

    # 20175126 2016-2017-2 <Java程序设计>第十周学习总结 ## 教材学习内容总结 - 本周学习方式主要为手动敲代码并理解内容学习. -本周学习十二章,主要内容如下: ...

  3. PHP 常用自定义函数

    模拟 POST.GET 请求 /** * 模拟post进行url请求 * @param string $url * @param string $param */ protected function ...

  4. sql查询某个时间内的数据

    hour) 七天之前的数据 SELECT * FROM commodity_order where create_time <= (now()-INTERVAL 7 DAY) order by ...

  5. Tomcat安装后修改路径方法

    tomcat+mysql+jdk 本地已经安装tomcat.mysql.jdk服务,需要更改安装目录由D盘改为C盘,方法如下 一.停止tomcat.mysql服务 二.安装文件由D盘拷贝到C盘,原D盘 ...

  6. cabal替代脚本

    由于网络原因,直接使用cabal update不成功,只能自己写脚本直接从网上拖包下来,自己安装. 但是这样做的缺点是需要手动处理dependency,当然,也可以把脚本写的复杂些,自动来处理depe ...

  7. Get The Treasury【HDU-3642】【扫描线】

    题目链接 题目给出的是N个体积块,问的是有多少体积重叠了3次及以上? 那么就是怎么处理体积这样子的问题了,看到Z的种类不多的时候,就想着从Z离散化的角度去考虑这个问题了,然后就是怎样子去处理面积了,这 ...

  8. vue中修改了数据但视图无法更新的情况(转)

    原文地址:https://blog.csdn.net/qq_39985511/article/details/79778806

  9. Python中的内置函数和匿名函数

    1. 内置函数 print用法 def print(self, *args, sep=' ', end='\n', file=None): # known special case of print ...

  10. python-前端Jquery

    Jquery 高级版javascript 提供了更加便利的js使用方式 楔子 需求二:将上面的li标签实现隔行换色效果 js代码 <script> var obj = document.g ...