使用el-checkbox實現(xiàn)全選，點擊失效沒有反應

Binguner 發(fā)布于2019-08-23 12:29 / 2189人閱讀

摘要：最近在公司接收到了一個需求，給收藏夾的書籍添加批量全選刪除實現(xiàn)思路點擊全選改變的，改變的，重新便利一下所有的來改變?nèi)x的該組件基本功能已經(jīng)實現(xiàn)，用的，苦于官網(wǎng)沒有這樣功能的，我按照上面的思路實現(xiàn)，但頭疼的是他只有事件，也就是說在實現(xiàn)全選改

最近在公司接收到了一個需求，給收藏夾的書籍添加批量、全選刪除
實現(xiàn)思路：點擊全選改變item的checked，改變item的checked，重新便利一下所有item的checked來改變?nèi)x的selectAll
1）該組件基本功能已經(jīng)實現(xiàn)，checkbox用的vant-ui，苦于官網(wǎng)沒有這樣功能的demo，我按照上面的思路實現(xiàn)，但頭疼的是他只有change事件，也就是說在實現(xiàn)全選改變item的checked的時候會觸發(fā)item的change，同時item的change會觸發(fā)全選的change里面的事件，從而就無限循環(huán)了
2）用原生的用click代替change事件
3）使用el-checkbox，還好項目也用了element-ui 查了一下實現(xiàn)方案,雖然對他的val有點疑問
注意：el-checked綁定的數(shù)據(jù)要在data里面一開始就有，不能后期追加，會導致有時候點擊失效，哈哈哈~~



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;
  })
}

云服務器 GPU云服務器 java下載沒有反應 linux掛載硬盤沒有反應阿里云服務器沒有反應 js實現(xiàn)按鈕點擊

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/98615.html

el-select 下拉框多選實現(xiàn)全選

摘要：還是看代碼吧。。。部分請選擇全選全選部分一一二二三三四四五五全選全選全選全選全選全選看看效果圖方法二直接添加一個全選復選框，實現(xiàn)的功能跟方法一是一樣的部分請選擇全選部分一一二二三三四四五五效果圖在寫一個功能時發(fā)現(xiàn)el-select支持多選，但是竟然不支持全選，好無語哦，那就自己實現(xiàn)一下吧~有兩種方法，第二種感覺簡單些方法一：下拉項增加一個【全選】，然后應該有以下幾種情況：下拉選...

Miyang 2019-08-26 10:30 評論0 收藏0
原生Js-msi系統(tǒng)

摘要：我也意識到在學習一個框架前，將框架的思想和原生的實現(xiàn)進行對比有多么重要。這個是目前為止一個大的框架思路，當然還要再進行每個功能的細分。表格將上一步的并集數(shù)據(jù)顯示出來渲染分表格，表格有一個表頭，用于展示商品的種類地區(qū)以及每月的銷售情況。前言：由于剛?cè)肭岸藭r間并不長，之前最近一直處在學習的階段，現(xiàn)在準備找工作，回首看看之前學的，發(fā)現(xiàn)了很多的瑕疵。我分析覺得主要原因在于之前有些東西學的太快...

K_B_Z 2019-08-23 10:54 評論0 收藏0
原生js練習題---第二課（下）

摘要：最后，我們只要在事件處理程序中獲得這個布爾值傳給這幾個函數(shù)就可以了，其中，全選框反選鏈接可以從全選框的屬性獲得這個值，而全體的復選框要獲得就得靠遍歷了。 0x1播放列表收縮展開實現(xiàn)效果值得注意的一個地方是那個箭頭，我這里只是用了簡單的字符串替換，而原題用了背景圖片移動來實現(xiàn)切換箭頭，但是似乎那樣做會導致整個容器的左右偏移、效果不是很好。 0x2鼠標移過顯示車標實現(xiàn)效果這題看起來...

Little_XM 2019-08-19 17:51 評論0 收藏0
jQuery獲取和設置checkbox的checked屬性小結(jié)

摘要：最近在項目中使用到設置，使用場景是頁面上有三類單選框，一個是全選所有頁數(shù)據(jù)一個是選擇當前頁，一個是選擇一條，也算常用的場景。的屬性在頁面首次加載時就確定。最后，總結(jié)下獲取和設置屬性的方法。最近在項目中使用到jQuery設置checkbox，使用場景是頁面上有三類單選框，一個是全選所有頁數(shù)據(jù)(id=cb1),一個是選擇當前頁(id=cb2)，一個是選擇一條(name=cb3)，也算常用...

scola666 2019-08-01 16:42 評論0 收藏0
解析vue表單驗證rules及validator驗證器的使用方法

　　很多知識都是需要提早知道，才可以規(guī)避很多錯誤。　　Element中Form （表單）組件提供了表單驗證的功能，只需要通過 rules 屬性傳入約定的驗證規(guī)則，并將 Form-Item 的 prop 屬性設置為需校驗的字段名即可。　　注意：prop對應表單域 model 字段，使用 validate方法時，該屬性是必填的。　　表單驗證rules　　以官網(wǎng)給出的例子分析來看　　將prop屬性設置為...

3403771864 2022-11-23 21:44 評論0 收藏0