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 批量删除的更多相关文章
- repeater 结合checkbox批量删除
项目中用到这个,从网上搜了搜相关内容,代码如下 <script type="text/javascript"> function checkAllThis(obj) { ...
- checkbox批量删除功能
参考:http://www.jb51.net/article/35338.htm 感谢作者 代码片段:jsp <c:forEach items="${infolist }" ...
- listview使用checkbox批量删除出现的问题
1.选中前面的checkbox导致后的checkbox被选中 2.选中后下滑listview,再上滑时被选中的checkbox又变成未选中状态. 问题大都是因为对listview进行代码优化重用con ...
- Android 长按Listview显示CheckBox,实现批量删除。
ListView实现的列表,如果是可编辑,可删除的,一般都要提供批量删除功能,否则的话,一项一项的删除体验很不好,也给用户带来了很大的麻烦. 实现效果图 具体实现代码 select.xml 主布局文件 ...
- checkbox复选框全选批量删除
多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...
- 项目element-ui checkbox里面获取选中项 实现批量删除 修改
<el-table :data="tableData" stripe border style="width: 100%" @selection-chan ...
- 批量删除checkbox前台后台
<%@ page contentType="text/html;charset=UTF-8" %><%@ include file="/WEB-INF/ ...
- 通过dataGridView控件中的checkBox控件对数据库进行批量删除
string id_s = ""; ; i < dataGridView1.Rows.Count; i++) //遍历所有行 { if (dataGridView1.Rows ...
- php批量删除
php批量删除可以实现多条或者全部数据一起删除 新建php文件 显示数据库中内容: <table width="100%" border="1" cell ...
随机推荐
- pacman 命令详解
Pacman 是一个命令行工具,这意味着当你执行下面的命令时,必须在终端或控制台中进行. 1.更新系统 在 Arch Linux 中,使用一条命令即可对整个系统进行更新:pacman -Syu 如果你 ...
- 一,python编程100例
1.有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? #有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? number = (1 ,2,3,4) ...
- String常用使用方法,1.创建string的常用3+1种方式,2.引用类型使用==比较地址值,3.String当中获取相关的常用方法,4.字符串的截取方法,5.String转换常用方法,6.切割字符串----java
一个知识点使用一个代码块方便查看 1.创建string的常用3+1种方式 /* 创建string的常用3+1种方式 三种构造方法 public String():创建一个空字符串,不含有任何内容: p ...
- uniapp之w-picker使用采坑
1. uniapp之w-picker使用采坑 1.1. 前言 由于我是先在index页面集合了这个组件,发现该文件内容实在太多了,不好维护,所以打算把内容一个个抽成组件,在抽w-picker时,遇到了 ...
- formData详细使用教程
formData是ajax2.0(XMLHttpRequest Level2)新提出的接口,利用FormData对象可以将form表单元素的name与value进行组合,实现表单数据的序列化,从而介绍 ...
- vue脚手架引入MD5加密函数
可以在全局定义一个MD5的方法,然后引入到vue的脚手架中. 首先 npm install crypto --save 然后引用定义一个对象, import crypto from 'crypto'; ...
- MongoDB(NoSQL) 非关系型数据库
目录 简单了解 mongoDB 简单使用mongoDB 简单了解 mongoDB # NoSQL 泛指非关系型的数据库 NoSQL(NoSQL = Not Only SQL ),意即"不仅仅 ...
- 微博api接口登陆,获取信息,分享微博
import json from datetime import datetime import MySQLdb import requests from flask import Flask, re ...
- centos 服务器 nginx 负载均衡服务安装
yum -y install gcc gcc-c++ autoconf automake libtool make cmake yum -y install zlib zlib-devel opens ...
- 【Git】Git如何合并某一次commit的内容到指定分支
一.我是在什么场景下会用到该Git操作 当某同事,将开发分支dev2合并到开发分支dev1时(两个不同的功能,不能合并),其他同事不知情的情况下,继续在dev1上开发并提交了代码. 后面发现了该合并, ...