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

<!DOCTYPE html><html><head><meta charset="utf-8"><title>练习：用户管理</title><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>&l...

不太想事贼佛系的CV码农

4904人浏览 · 2020-03-23 17:40:27

不太想事贼佛系的CV码农 · 2020-03-23 17:40:27 发布

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^