zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    C#.ToString()格式大全
    C# 中的正则验证及用法
    解除SVN的控制
    SVN检出忽略文件夹文件
    Mac下查看及生成SSH Key
    Xcode-报错问题总结大全
    CentOS6.5上kafka 安装过程-多机版本
    神经网络绘图网址
    CentOs 中没有eth0文件
    Spring 入门
  • 原文地址:https://www.cnblogs.com/TreeCTJ/p/11529875.html
Copyright © 2011-2022 走看看