使用el-checkbox实现全选,点击失效没有反应

最近在公司接收到了一个需求,给收藏夹的书籍添加批量、全选删除
实现思路:点击全选改变item的checked,改变item的checked,重新便利一下所有item的checked来改变全选的selectAll
1)该组件基本功能已经实现,checkbox用的vant-ui,苦于官网没有这样功能的demo,我按照上面的思路实现,但头疼的是他只有change事件,也就是说在实现全选改变item的checked的时候会触发item的change,同时item的change会触发全选的change里面的事件,从而就无限循环了
2)用原生的用click代替change事件
3)使用el-checkbox,还好项目也用了element-ui 查了一下实现方案,虽然对他的val有点疑问
注意:el-checked绑定的数据要在data里面一开始就有,不能后期追加,会导致有时候点击失效,哈哈哈~~

<el-checkbox v-model="selectAll" @change="selectAllFunc"></el-checkbox>
<el-checkbox  v-model="item.checked" @change="selectProduct"></el-checkbox>
selectProduct(val) {for(let i = 0,len = this.collectionlist.length;i < len;i ++){if(!this.collectionlist[i].checked){this.selectAll = false;return false;}}this.selectAll = true;
}
selectAllFunc(val){this.collectionlist.map((item,i)=>{item.checked = val;})
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/450394.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring3.2新注解@ControllerAdvice

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 ControllerAdvice&#xff0c;是spring3.2提供的新注解&#xff0c;从名字上可以看出大体意思是控制器增强。让我们先看看ControllerAdv…

C语言关键字

C语言do、while、for关键字—循环 C 语言中循环语句有三种&#xff1a;while 循环、do-while 循环、for 循环。while 循环&#xff1a;先判断while 后面括号里的值&#xff0c;如果为真则执行其后面的代码&#xff1b;否则不执行。while&#xff08;1&#xff09;表示死循环。…

jQuery核心

jQuery(selector) jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数&#xff0c;或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式&#xff08;通常由 CSS 选择器组成&#xff09;&#xff0c;然后根据这个表达式来查…

预处理

C语言##预算符 和#运算符一样&#xff0c;##运算符可以用于宏函数的替换部分。这个运算符把两个语言符号组合成单个语言符号。看例子&#xff1a;#define XNAME(n) x ## n如果这样使用宏&#xff1a;XNAME(8)则会被展开成这样&#xff1a;x8看明白了没&#xff1f; ##就是个粘合…

cAdvisor+InfluxDB+Grafana 监控Docker

容器的监控方案其实有很多&#xff0c;有docker自身的docker stats命令、有Scout、有Data Dog等等&#xff0c;本文主要和大家分享一下比较经典的容器开源监控方案组合&#xff1a;cAdvisorInfluxDBGrafan 一、概念 1). InfluxDB是什么nfluxDB是用GO语言编写的一个开源分布式时…

计算机网络知识简单介绍

一、网络基础 1.网络指的是什么&#xff1f; 计算机与计算机之间通过物理链接介质&#xff08;网络设备&#xff09;连接到一起。 计算机与计算机之间基于网络协议通信&#xff08;网络协议就相当于计算机界的英语&#xff09; 2.osi七层协议&#xff1a; 互联网协议按照功能不…

Linux下安装FFmpeg

FFmpeg官网&#xff1a;http://www.ffmpeg.org 官网介绍 FFmpeg is the leading multimedia framework, able to decode, encode, transcode, mux, demux, stream, filter and play pretty much anything that humans and machines have created. It supports the most obscure…

【Python web 开发】viewset 实现商品详情页的接口

我们如何来完成商品详情页的接口呢&#xff1f; 首先要配置一个商品详情的url 按照我们正常的接口配法 &#xff0c;应该是后面要加一个id 的&#xff0c;为什么这里没有加id 呢? ,应该是rooter register 的作用吧&#xff0c;等我在学习一遍基础再来回答&#xff1f; 那么我…

Ignite中的机器学习介绍

为什么80%的码农都做不了架构师&#xff1f;>>> 本系列共6篇文章&#xff0c;会通过一些代码示例&#xff0c;讲解如何在Ignite中使用机器学习库&#xff0c;本文是本系列的第一篇。 从Ignite的2.4版本开始&#xff0c;机器学习就可以用于生产环境了。在这个版本中…

新架构让数据中心犹如PC

摘要&#xff1a;随着VL2网络拓扑结构带来了对等带宽&#xff0c;大量数据可以存放在远方的数据中心&#xff0c;访问起来却犹如它们就在本地&#xff0c;这将对数据中心的架构产生重大影响。Todd Hoff参加了Hot Interconnects大会&#xff0c;对微软VL2架构做了详细解读。CSDN…

mongodb分片概念和原理-实战分片集群

一、分片分片是一种跨多台机器分发数据的方法。MongoDB使用分片来支持具有非常大的数据集和高吞吐量操作的部署。问题&#xff1a;具有大型数据集或高吞吐量应用程序的数据库系统可能会挑战单个服务器的容量。例如&#xff0c;高查询率会耗尽服务器的CPU容量。工作集大小大于系…

加入初创企业需要想清楚的几个问题

摘要&#xff1a;加入一家初创企业是一段充满冒险的旅程。沿途不会都是美景&#xff0c;更别忘了最初的梦想。 去初创公司面试&#xff0c;你一般会纠结于被问到什么问题。但更重要的是问自己&#xff1a;你下定决心在接下来的5年中“从头再来”吗&#xff1f;你能接受这份薪资…

地图市场三足鼎立:诺基亚官方确认与亚马逊合作

摘要&#xff1a;诺基亚确认为亚马逊新推出的平板提供地图服务&#xff0c;至此地图市场“三家分晋”的格局已趋明朗。 路透社之前曾报道称亚马逊在新版Kindle中将使用诺基亚提供的地图服务。但直到今日&#xff0c;这则消息才得到双方的确认。诺基亚方面确认将为亚马逊提供地图…

关于明晚即将发布的新款 iPad Pro,最大的亮点也许不是 Face ID

北京时间 10 月 30 日晚间 10 点&#xff0c;苹果将会在美国纽约的布鲁克林音乐学院举行新品发布会。考虑到此前苹果已经在 9 月的发布会上宣布了 Apple Watch Series 4 和 iPhone XS/Max、iPhone XR 等新品&#xff0c;因此苹果此次的纽约发布会&#xff0c;大家的目光更多地投…

11. Container With Most Water

题意 给定n个非负整数\(a_1,a_2,...,a_n\),其中每个数表示坐标点\((i,a_i)\),i是数组下标,\(a_i\)是对应高度.寻找两条线,使得两条线构成的长方形面积最大,盛水最多. Example: Input: [1,8,6,2,5,4,8,3,7] Output: 49 解 暴力破解 对每种情况进行循环,计算对应的面积,同时保存最…

先思再行 闭着眼睛编程

摘要&#xff1a;解决问题最重要的习惯不是一直盯着屏幕和编写修改代码&#xff0c;某些时候&#xff0c;阻止你成功的东西恰恰会是过于努力。这时候你需要暂停一下&#xff0c;平缓你的思绪&#xff0c;换一种方法或许能带给你不一样的效果。你会花多少时间思考如何编写代码&a…

javaScript复习

ES6字符串方法&#xff1a; //console.log(String.prototype);var str "abcdefabc";//console.log(str.includes("a"));//结果true//console.log(str.includes("abf"));//结果false//console.log(str.startsWith("d"));//false//cons…

STS的安装教程-鹏鹏

STS全称Spring Tools Suite。 简介&#xff1a;Spring Tools Suite (STS)其实就是一个被包装过的Eclipse&#xff0c;主要用于快速的开发Spring项目&#xff0c;我们不用再去编辑繁琐的xml配置文件&#xff0c;而是由工具自动生成。STS有两种安装方式&#xff0c;一种是直接在E…

linux逻辑卷管理

2019独角兽企业重金招聘Python工程师标准>>> 摘要&#xff1a; Linux用户安装Linux操作系统时遇到的一个最常见的难以决定的问题就是如何正确地给评估各分区大小&#xff0c;以分配合适的硬盘空间。而遇到出现某个分区空间耗尽时&#xff0c;解决的方法通常是使用符…

github 如何设置项目的语言显示

github 会根据一个项目文件最多的那个种类的文件显示为对应的语言项目 如果想让整个项目显示为 HTML 项目, 需要进行以下步骤的设置 1.在根目录下创建一个文件 .gitattributescreate .gitattributes2.在 .gitattributes 内编辑以下内容&#xff1a; *.js linguist-languageHTML…