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  

     　　　　// :name = "index" 就是获取已选中的index checkboxResult是一个数组 里面存放的就是我们选中的index 

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

 

转载于:https://www.cnblogs.com/TreeCTJ/p/11529875.html