vant checkBox 批量刪除


有兩種實現方式,當然不止兩種

一:使用 filter 將我們需要的過濾出來,也就是哪個沒有選中就過濾哪個

二:使用splice數組方法,將我們選擇需要刪除的 index 放到一個數組里面,然后進行刪除。 splice有一個坑(splice會改變原數組)

 

先說說方法一:

/*
      假設我們是依賴這個數據來進行渲染,v-for="(item,index) in addressList"
      使用filter 的話我們可以給每一個對象添加一個key值isDel  ,你在增加的一個人時也只需要push {"name": "", "gender": "", "age":"", "isDel":false}

    
    給每一個對象加入key為isDel:false
      addressList.forEach((item,index)=>{
        item["isDel"] = false
      })

    配合使用vantUI 里面的 <van-checkbox v-model="item.isDel"></van-checkbox> 只要當復選框被選中時 isDel 就會改為 true
   
    最后寫上 addressList = addressList.filter(item=>item.isDel === false) 這就將沒選中的過濾出來 也就是相當於刪除選中的
*/ var addressList = [ { "name": "張三", "gender": "男", "age":'22' }, { "name": "李四", "gender": "男", "age":'20' }, { "name": "王五", "gender": "女", "age":'18' }, ]

 

方法二:使用splice 這個 方法要注意這個方法是會改變原數組,一個一個刪除是么得問題哦,但是 如果需要不連續刪除 就會有坑      https://www.cnblogs.com/ly0612/p/6750233.html

    這里使用vant checkBox  (復選框組)  之所以使用這個主要是為了拿到已選中的 index  

<van-checkbox-group v-model="checkboxResult">
     <van-checkbox :name="index"></van-checkbox>    // :name = "index" 就是獲取已選中的index checkboxResult是一個數組 里面存放的就是我們選中的index 
</van-checkbox-group>
let newIndexs = this.checkboxResult.map(function(val, idx) {
      return val - idx;
});

newIndexs.forEach((item, index) => {
      this.addingAddressList.splice(item, 1);
});

是這個大佬告訴我怎么填坑的  https://www.cnblogs.com/ly0612/p/6750233.html

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM