vue做简单的批量删除，全选删除

最新推荐文章于 2024-06-13 14:06:36 发布
最新推荐文章于 2024-06-13 14:06:36 发布
阅读量4.8k 收藏 15
点赞数 2
分类专栏： javascript 前端页面类 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YOYOYOHUI/article/details/105053375
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习：用户管理</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
			<h2>添加用户</h2>
			<form action="" class="form-horizontal">
				<div class="form-group">
					<label for="name" class="control-label col-sm-2 col-sm-offset-2">姓名：</label>
					<div class="col-sm-6">
						<input type="text" class="form-control" id="name" v-model="user.name" placeholder="输入姓名">
					</div>
				</div>
				<div class="form-group">
					<label for="age" class="control-label col-sm-2 col-sm-offset-2">姓名：</label>
					<div class="col-sm-6">
						<input type="text" class="form-control" id="age" v-model="user.age" placeholder="输入年龄">
					</div>
				</div>
				<div class="form-group">
					<label for="email" class="control-label col-sm-2 col-sm-offset-2">姓名：</label>
					<div class="col-sm-6">
						<input type="text" class="form-control" id="email" v-model="user.email" placeholder="输入邮箱">
					</div>
				</div>
				<div class="form-group text-center">
					<input type="button" value="添加" @click="addUser" class="btn btn-primary"/>
					<input type="reset" value="重置" class="btn btn-primary"/>
				</div>
			</form>
			<hr >
			<table class="table table-bordered table-hover">
				<caption class="h3 text-center text-info">用户列表</caption>
				<thead>
					<tr>
						<th class="text-center">多选</th>
						<th class="text-center">序号</th>
						<th class="text-center">姓名</th>
						<th class="text-center">年龄</th>
						<th class="text-center">邮箱</th>
						<th class="text-center">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(user,index) in users">
						<td class="text-center">
							<input type="checkbox" :value="index" v-model="selectArr">
						</td>
						<td class="text-center">{{index+1}}</td>
						<td class="text-center">{{user.name}}</td>
						<td class="text-center">{{user.age}}</td>
						<td class="text-center">{{user.email}}</td>
						<td class="text-center">
							<button class="btn btn-danger" @click="deleteOne(index)">删除</button>
						</td>
					</tr>
					<tr>
						<td colspan="6" class="text-right">
							{{selectArr}}
							<input type="checkbox" class='checkbox' @click="selectAll">
							<button @click="deleteSel" type="button" class="btn btn-danger">批量删除</button>
							<button @click="deleteAll" type="button" class="btn btn-danger">删除所有</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<script src="js/vue.js"></script>
		<script>
			let vm = new Vue({
				el:".container",
				data:{
					users:[
						{name:'Lee',age:26,email:'lee@gmail.com'},
						{name:'Jay',age:40,email:'jay@gmail.com'}
					],
					user:{},
					selectArr:[]
				},
				methods:{
					addUser:function(){//添加用户
						if(this.user) {
							this.users.push(this.user);
							this.user = {};
						}	
					},
					deleteAll(){//全部删除
						this.users = []
					},
					deleteOne(index){//删除指定栏目
						this.users.splice(index,1)
					},
					deleteSel(){//选择删除
						let arr = [];
						var len = this.users.length;
						for(let i = 0;i<len;i++) {
							if (this.selectArr.indexOf(i) >=0 ) {
								console.log(this.selectArr.indexOf(i));
							}else{
								arr.push(this.users[i]);
							}
						}
						this.users = arr;
						this.selectArr = [];
					},
					selectAll(event){//全选
						// console.log(event);
						var _this = this;
						// console.log(event.currentTarget);
						if(!event.currentTarget.checked) {
							this.selectArr = [];
						}else{
							this.selectArr = [];
							/*	这里的this指向问题需要注意一下每一个用function声明的函数在调用时都会在函数内创建自己的this。
							**  this一般是函数所操作的对象。如果没有操作的对象。this在"use strict";严格模式下是 undefined，非严格模式下是 window。
							**	也就是说，function声明的函数总是有自己的this。从而遮盖外层作用域中的this。
							**	如果用es6的箭头函数()=>{}就没有自己的this。在箭头函数()=>{}中访问this，是访问外层作用域中的this
							*/
							// this.users.forEach(function(item,i) {
							// 	_this.selectArr.push(i)
							// })
							this.users.forEach((item,i)=>{
								this.selectArr.push(i)
							})
						}
					}
				}
			});
		</script>
	</body>
</html>

不太想事贼佛系的CV码农
关注
  • 2
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue实现购物车简单的功能-单选全选总价计算、批量删除
Mr_Baoge的博客
02-12 6675
vue实现购物车简单的功能-----单选全选总价计算、批量删除等 观看了后盾人视频教学，视频里面对于全选和单选的功能没有讲全，于是自己研究了一下，前端小白,也是第一次写博客，有什么不足和可以优化的地方欢迎大佬指导一下！ 效果截图： 以下附上全部的代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta cha...
使用vue.js实现checkbox的全选和多个的删除功能
10-20
主要介绍了使用vue.js实现checkbox的全选和多个的删除功能,需要的朋友可以参考下
如何基于Vue实现批量删除
最新发布
weixin_57237364的博客
06-13 237
这一步需要注意你的<el-table>属性里是否添加了ref，例如。1.第一步我们需要添加一个批量删除的按钮，并且底色为红色。type设置了危险样式(红色，一般是删除)。2.第二步我们需要根据自己的表单添加复选框。@click代表点击按钮后使用的方法。3.第三步就是编写点击按钮后使用的方法。这一步是保证我们可以拿到选中的行。
VUE前端删除和批量删除
weixin_46645338的博客
10-31 9744
在element ui的el-table 我们需要先写出删除按钮接下来就可以在methods 中定义出这个方法了methods: {this.$confirm("此操作将删除信息, 是否继续?", "提示", {confirmButtonText: "确定",
简单vue表格批量删除功能
weixin_49471544的博客
04-21 4577
简单vue表格批量删除功能
element table批量删除_Vue+elementUI如何实现表格实现全选删除，批量删除
weixin_39611331的博客
12-20 2275
思路：1、表格外部添加批量删除按钮2、表格加入id字段显示和checkbox多选按钮3、data里面定义一个ids数组，用于存储id集合4、点击按钮获取id值，以数组方式传给后端，执行ajax删除5、不管删除成功与否，但页面提示框关闭后，刷新列表模板按钮区域添加点击方法batchDelete(tableChecked)添加文章批量删除模板表格区域编辑删除逻辑代码区域data(){return{ta...
vue3：使用：批量删除功能
1363648943的专栏
08-28 2310
element plus 批量删除功能
vue实现购物车全选 批量删除价格计算等功能
我是小奶音啊的博客
07-01 1900
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./vue.js"></scrip
vue实现批量删除
m0_64411343的博客
08-29 2887
vue实现批量删除
vue3 全选 以及取消全选功能
weixin_44325341的博客
04-07 7899
首先引用elementplus的模板checkbox多选框 具体需要实现的功能有： 1.点击全选按钮 所有的小框框都是选中状态 2.当为选中状态时，点击任意条例选中框取消选中状态，则全选也随之取消 3.当手动一个一个将下面的条例选中 全部的条例都是选中状态时 全选自动是选中状态 具体效果图如下 大概思路： 准备两个数组 放数据的id（因为id是唯一的） 一个将所有数据的id都放进去 另一个将选中的id放进去 通过判断二者是否完全相等来判断是否全选 ...
vue Table 表格绑定批量删除功能
瑰的博客
06-04 967
1. <el-tooltip class="item" effect="dark" v-if="selectionList" content="将选中当前分页的所有数据，请确认后操作" placement="top-start"> <el-button class="mr10" type="checkbox" :indeterminate="isIndeterminate" v-model="checkAll" @.
Vue实现购物车的全选、单选、显示商品价格代码实例
10-17
在Vue.js中实现购物车功能，包括全选、单选以及动态显示商品价格，涉及到Vue的数据绑定、事件处理以及计算属性等多个核心概念。以下是对这些知识点的详细解释： 1. **数据绑定** (`v-model`): Vue的核心特性之一，...
全选取消批量删除
08-24
在IT领域，"全选取消批量删除"是一个常见的功能需求，尤其在数据管理和用户界面设计中。这个功能允许用户高效地处理大量数据，提高工作效率。下面将详细解释这些概念及其在实际应用中的实现。 首先，**全选**是指在...
表格中全选按钮的使用以及删除功能的实现
04-23
批量操作则可以在用户选择多个条目后提供统一的操作选项，如批量删除、修改等。 综上所述，实现“表格中全选按钮的使用以及删除功能”涉及前端HTML、CSS、JavaScript与后端Java Web的结合，包括DOM操作、事件监听、...
表格的添加，全选，删除
11-27
在实际应用中，可能需要对表格进行更复杂的操作，比如批量删除、排序、筛选等。这些功能可以通过扩展上述方法实现，通常需要对数据进行处理并更新到表格中。此外，使用现代前端框架如React或Vue.js，可以更好地管理...
jquery 判断元素是hide,还是show
leejaneway的博客
10-28 7756
var hidden = $('#hidden').is(':hidden');// true 为隐藏状态 var visible = $('#visible').is(':visible');//true 为显示状态
js执行定时执行任务
leejaneway的博客
08-17 3550
最近一周，上面要求我开发以图搜图的图片搜索功能。捣鼓两天后完成了所有功能细节。但是线上已经存在很多图片了。需要将所有线上的图片提取出来，然后上传到搜图特征库里。 唉，想都没想，直接上js定时执行好了，简单省心 <script> //执行定时任务，并返回任务id var myTarget = setInterval(function(){ myDo(...
js大小写转换
leejaneway的博客
10-11 1350
toLowerCase()方法；//小写 toUpperCase()方法；//大写
vue2.0做批量删除
05-14
在 Vue 2.0 中，可以通过以下步骤实现批量删除： 1. 首先，需要在 Vue 实例中定义一个数组，用于存储要删除的数据。可以定义一个名为 `selectedItems` 的数组。 ```javascript data() { return { selectedItems: [] // 其他数据 } } ``` 2. 在页面中，需要为每个要删除的数据项添加一个复选框，以便用户选择要删除的数据。可以使用 `v-model` 指令将复选框的选中状态与 `selectedItems` 数组中的对应项绑定起来。 ```html <template> <div> <ul> <li v-for="item in items" :key="item.id"> <input type="checkbox" v-model="selectedItems" :value="item.id"> {{ item.name }} </li> </ul> <button @click="deleteSelectedItems">删除选中项</button> </div> </template> ``` 3. 在 `deleteSelectedItems` 方法中，遍历 `selectedItems` 数组，将每个选中的数据项从数据源中删除。可以使用 `splice` 方法。 ```javascript methods: { deleteSelectedItems() { for (let i = 0; i < this.selectedItems.length; i++) { const index = this.items.findIndex(item => item.id === this.selectedItems[i]) if (index !== -1) { this.items.splice(index, 1) } } this.selectedItems = [] // 删除完成后清空选中状态 } } ``` 4. 最后，需要对删除按钮进行禁用处理，以防止用户在没有选中任何数据时误操作。可以使用计算属性 `hasSelectedItems` 判断 `selectedItems` 数组是否为空，并将其绑定到删除按钮的 `disabled` 属性上。 ```javascript computed: { hasSelectedItems() { return this.selectedItems.length > 0 } } ``` ```html <template> <div> <ul> <li v-for="item in items" :key="item.id"> <input type="checkbox" v-model="selectedItems" :value="item.id"> {{ item.name }} </li> </ul> <button @click="deleteSelectedItems" :disabled="!hasSelectedItems">删除选中项</button> </div> </template> ``` 这样就可以实现批量删除了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值