使用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.pswp.cn/news/450394.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/450394.shtml
英文地址,請注明出處:http://en.pswp.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監…