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

一:使用 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. APS系统的现状以及与MES系统的关联

    MES是智能工厂的核心,将前端产品设计.工艺定义阶段的产品数据管理与后端制造阶段的生产数据管理融合,实现产品设计.生产过程.维修服务闭环协同全生命周期管理. APS就是高级计划排程 应该说APS本来是 ...

  2. 机器学习10种经典算法的Python实现

    广义来说,有三种机器学习算法 1. 监督式学习 工作机制:这个算法由一个目标变量或结果变量(或因变量)组成.这些变量由已知的一系列预示变量(自变量)预测而来.利用这一系列变量,我们生成一个将输入值映射 ...

  3. ip黑名单-做过ssh扫描黑的ip

    # # hosts.deny This file contains access rules which are used to # deny connections to network servi ...

  4. Linux普通用户登录后,命令行提示:-bash-4.1$ ,原因分析及解决

    原文 有时候在使用用户登陆Linux系统时会发现,命令行提示符成了:-bash-4.1$,不显示用户名,路径信息. 原因:用户家目录里面与环境变量有关的文件被删除所导致的 也就是这俩文件:.bash_ ...

  5. Prometheus学习笔记(1)Prometheus架构简介

    Prometheus简介和架构 Prometheus 是由 SoundCloud 开源监控告警解决方案.架构图如下: 如上图,Prometheus主要由以下部分组成: Prometheus Serve ...

  6. Java自动化环境搭建笔记(2)

    Java自动化环境搭建笔记(2) 自动化测试 在笔记一中已经完成了一键构建项目.xml指定规划测试集.数据解耦与allure报告生成的开发.接下来便是: 浏览器驱动通过配置启动 页面元素定位解耦,通过 ...

  7. PAT甲级1015题解——令人迷茫的翻译

    题目分析: 本题计算过程简单,但翻译令我迷茫:题意读清楚很重要(反正我是懵逼了)对于一个10进制的数,如果它是一个素数,把它转换成d进制,再将这个序列逆序排,这个逆序的d进制数的10进制表示如果也是素 ...

  8. Unity 渲染教程(四):第一个光源

    将法线从物体空间转换到世界空间. 使用方向光. 计算漫反射和镜面高光反射. 实现能量守恒. 使用金属的工作流程. 利用Unity的基于物理规则渲染的算法. 这是关于渲染基础的系列教程的第四部分.前面的 ...

  9. Spring Boot 中集成 Redis 作为数据缓存

    只添加注解:@Cacheable,不配置key时,redis 中默认存的 key 是:users::SimpleKey [](1.redis-cli 中,通过命令:keys * 查看:2.key:缓存 ...

  10. koa-session 知识点

    github 网址:https://github.com/koajs/session session 是一个对象