vant checkBox 批量删除
Posted treectj
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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
以上是关于vant checkBox 批量删除的主要内容,如果未能解决你的问题,请参考以下文章