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

<!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>

  • 2
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
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、付费专栏及课程。

余额充值