使用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…

Mysql1 晨考题

Mysql1 晨考题 1.描述主键、外键、候选主键、超键分别是什么 &#xff1f; &#xff08;1&#xff09;主键&#xff1a;数据库表中对存储数据对象给予唯一完整标识的数据列或属性的组合。一个数据列只能有一个主 键&#xff0c;且主键的取值不能缺失&#xff0c;即不能为空值…

C语言关键字

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

C语言字符篇(五)内存函数

memcpy不可以把目的地址写成本身但是memmove可以,因为它是先保存到临时空间 #include <string.h> void *memcpy(void *dest, const void *src, size_t n);将内存src拷贝n个字符到内存destvoid *memmove(void *dest, const void *src, size_t n);将内存src的前n个数据拷贝…

GMQ交易平台大力探索区块链技术,进一步推动产业繁荣

近年来&#xff0c;区块链技术作为金融科技的中坚力量&#xff0c;受到了产业界的热切关注&#xff0c;其实验开展和应用研发正在如火如荼的进行。 在此背景下&#xff0c;各地涌现出一大批优秀的企业投入到区块链产业中&#xff0c;各类企业投融 资活动十分活跃&#xff0c;充…

java 笔试题

JAVA-2003笔试题 一、选择题&#xff08;每小题2&#xff0c;共10分&#xff09; 下列语句序列执行后&#xff0c;m 的值是&#xff08; C &#xff09; int a10, b3, m5; if( ab ) ma; else ma*m; A.15 B.50 C.55 D.5若已定义byte[]x{11,22,33,-66}其中0≤k≤3&#xff0c;则…

objectdatasouce的温故

在做ecxel的时候&#xff0c;需要前台做一个联动的效果。 记录一下这个数据源的用法&#xff0c;大学时候用的&#xff0c;忘得差不多了 首先就是往页面拖拽一个objectdatasouce的控件 然后配置数据源&#xff1a; 选择业务对象(其实就是选择你要用的哪个类&#xff0c;如果下拉…

都会五星回评,欢迎留下地址-博客之星

欢迎五星回评地址https://bbs.csdn.net/topics/603961857

jQuery核心

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

Feign api调用方式

Feign使用简介 基本用法 基本的使用如下所示&#xff0c;一个对于canonical Retrofit sample的适配。 interface GitHub {// RequestLine注解声明请求方法和请求地址,可以允许有查询参数RequestLine("GET /repos/{owner}/{repo}/contributors")List<Contributor&g…

预处理

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

Lambda表达式使用2

1.概述    本篇主要介绍lambda中常用的收集器&#xff0c;收集器的作用就是从数据流中生成需要的数据接口。    最常用的就是Collectors.toList()&#xff0c;只要将它传递给collect()函数&#xff0c;就能够使用它了。    在我们使用收集器的时候经常会用到“方法…

notepad++ 使用去掉自动检查红线

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 notepad新升级了之后就有自动判断的红线&#xff0c;单词拼错了就给提示&#xff0c;看着这红线实在难受 在 菜单选项&#xff1a;[插件…

cAdvisor+InfluxDB+Grafana 监控Docker

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

C语言return关键字

return 用来终止一个函数并返回其后面跟着的值。return &#xff08;Val&#xff09;&#xff1b;//此括号可以省略。但一般不省略&#xff0c;尤其在返回一个表达式的值时。return 可以返回些什么东西呢&#xff1f;看下面例子&#xff1a;char * Func(void){char str[30];…r…

win7旗舰版怎么降级到专业版

一、操作准备及注意事项 1、UltraISO光盘制作工具9.5 2、备份C盘及桌面文件 二、win7旗舰版改成专业版的步骤 1、当前系统为Win7 SP1 64位旗舰版&#xff1b; 2、按WinR打开运行&#xff0c;输入regedit打开注册表编辑器&#xff0c;定位到HKEY_LOCAL_MACHINE\Software\Microso…

JPA criteria 查询:类型安全与面向对象

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 JPA的标准查询,名为:JPA criteria查询. 相比JPQL,其优势是类型安全,更加的面向对象.使用标准查询,开发人员可在编译的时候就检查 查询的…

Algs4-1.4.18数组的局部最小元素

1.4.18数组的局部最小元素。编写一个程序&#xff0c;给定一个含有N个不同整数的数组&#xff0c;找到一个局部最小元素:满足a[i]<a[i-1],且a[i]<a[i1]的索引i。程序在最坏情况下所需的比较次数为~2lgN。答&#xff1a;检查数组的中间值a[N/2]以及和它相邻的元素a[N/2-1]…

编程技能和做员工的技能——哪个更重要?

摘要&#xff1a;不管我们程序员如何认识这个问题&#xff0c;如果你想在给别人编程打工中获得事业成功&#xff0c;编程技能不是第一重要的。学会如何做一个好的员工才是重要的&#xff0c;甚至是非常重要的。从最最基本的层面上讲&#xff0c;每个员工都应该为最求两种基本的…

nginx-exporter安装使用

一、没有vts的启动方式 #nginx_exporter -telemetry.address:9113 -nginx.scrape_uri"http://127.0.0.1:10000/nginx_statusnginx_exporter -telemetry.address:9113 -nginx.scrape_uri"https://xx.xx.xx.xx:18443" -insecure #端口9113应该是nginx_exporter监…