有两种实现方式,当然不止两种

一:使用 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 批量删除的更多相关文章

  1. repeater 结合checkbox批量删除

    项目中用到这个,从网上搜了搜相关内容,代码如下 <script type="text/javascript"> function checkAllThis(obj) { ...

  2. checkbox批量删除功能

    参考:http://www.jb51.net/article/35338.htm 感谢作者 代码片段:jsp <c:forEach items="${infolist }" ...

  3. listview使用checkbox批量删除出现的问题

    1.选中前面的checkbox导致后的checkbox被选中 2.选中后下滑listview,再上滑时被选中的checkbox又变成未选中状态. 问题大都是因为对listview进行代码优化重用con ...

  4. Android 长按Listview显示CheckBox,实现批量删除。

    ListView实现的列表,如果是可编辑,可删除的,一般都要提供批量删除功能,否则的话,一项一项的删除体验很不好,也给用户带来了很大的麻烦. 实现效果图 具体实现代码 select.xml 主布局文件 ...

  5. checkbox复选框全选批量删除

    多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...

  6. 项目element-ui checkbox里面获取选中项 实现批量删除 修改

    <el-table :data="tableData" stripe border style="width: 100%" @selection-chan ...

  7. 批量删除checkbox前台后台

    <%@ page contentType="text/html;charset=UTF-8" %><%@ include file="/WEB-INF/ ...

  8. 通过dataGridView控件中的checkBox控件对数据库进行批量删除

    string id_s = ""; ; i < dataGridView1.Rows.Count; i++) //遍历所有行 { if (dataGridView1.Rows ...

  9. php批量删除

    php批量删除可以实现多条或者全部数据一起删除 新建php文件 显示数据库中内容: <table width="100%" border="1" cell ...

随机推荐

  1. Socket心跳机制-JS+PHP实现

    本文是我在实际工作中用到的Socket通信,关于心跳机制的维护方式,特意总结了一下,希望对朋友们有所帮助. Socket应用:首先Socket 封装了tcp协议的,通过长连接的方式来与服务器通信,是由 ...

  2. 安装多个jdk导致eclipse打不开问题

    问题描述 本来使用的是jdk1.8,由于其他原因需要使用jdk1.6,在安装完jdk1.6后打开eclipse就会报错: Version 1.6.0_43 of the JVM is not suit ...

  3. MySQL里默认的几个库是干啥的?

    本文涉及:MySQL安装后自带的4个数据库:information_schema. performance_schema.sys.mysql的作用及其中各个表所存储的数据含义 information_ ...

  4. 【MySQL】mysql中的锁机制

    一.分类 MySQL的锁机制不同的存储引擎支持不同的锁机制,分为表级锁.行级锁.页面锁.MyISAM和MEMORY存储引擎采用的是表级锁(table-level locking):BDB存储引擎采用的 ...

  5. Django之form主键

    Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否 ...

  6. 让Windows中的文件名支持大小写

    背景 最近在Linux官网下载了Linux内核,下载下来的是一个后缀为.tar.xz的压缩包,于是在毫不知情的情况下随随便便解压了,解压过程中出现了很多问题. 其中一个问题就是在Windows下,不区 ...

  7. SQL注入(1)

    一.注入点的判断及猜解1.加入单引号 ’提交,结果:如果出现错误提示,则该网站可能就存在注入漏洞.2.数字型判断是否有注入;语句:and 1=1 ;and 1=2 (经典).' and '1'=1(字 ...

  8. Python使用Thrift

    2019年07月30日 14:59:29 Shower稻草人 阅读数 25更多 分类专栏: Python   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接 ...

  9. Ubuntu不能使用passwd的--stdin的解决办法

    转载请注明来源https://www.cnblogs.com/sogeisetsu/p/11397648.html Ubuntu不能使用passwd的--stdin的解决办法 可以使用chpasswd ...

  10. 性能测试基础---事务&检查点&思考时间&集合点

    性能测试脚本的增强:·参数化·关联·事务·检查点·思考时间·集合点 ·事务:事务的引入是为了度量相关的业务请求的响应时间和吞吐量指标.在LR中,事务是通过两个事务函数来实现的. lr_start_tr ...