Vue-表单验证-全选-反选-删除-批量删除

2021/9/1 6:08:05

编程Tag： vue 删除 return 反选 false email status user errors

本文主要是介绍Vue-表单验证-全选-反选-删除-批量删除，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
			integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	</head>
	<body>
		<div id="app" style="width: 1000px;margin: 0 auto;margin-top: 60px;">
			<div class="form-group">
				<label>手机号</label>
				<input type="text" class="form-control" placeholder="(请输入手机号)" style="width: 500px;" v-model="mobile" />
			</div>
			<div class="form-group">
				<label>邮箱</label>
				<input type="text" class="form-control" placeholder="(请输入电子邮箱)" style="width: 500px;" v-model="email" />
			</div>
			<div class="form-group">
				<label>真实姓名</label>
				<input type="text" class="form-control" placeholder="(姓名必须是中文汉字)" style="width: 500px;"
					v-model="realname" />
			</div>

			<button type="button" class="btn btn-primary" @click="add">立即添加</button>
			<p v-for="(v,k) in errors" style="margin: 0 auto;margin-top: 20px;color: red;font-size: 18px;">
				{{v}}
			</p>

			<div style="margin-top: 60px;">
				<table class="table table-hover">
					<th><input type="checkbox" v-model="isCheck" @click="check()"></th>
					<th>编号</th>
					<th>手机号</th>
					<th>邮箱</th>
					<th>真实姓名</th>
					<th>操作</th>
					<tr v-for="(v,k) in user">
						<td><input type="checkbox" v-model="v.status"></td>
						<td>{{v.id}}</td>
						<td>{{v.mobile}}</td>
						<td>{{v.email}}</td>
						<td>{{v.realname}}</td>
						<td><button class="btn btn-danger" @click="del(k)">删除</button></td>
					</tr>
				</table>
				<button class="btn btn-danger" @click="checkAll()">全选</button>
				<button class="btn btn-danger" @click="checkNo()">全不选</button>
				<button class="btn btn-danger" @click="checkRev()">反选</button>
				<button class="btn btn-danger" @click="checkDel()">批量删除</button>
			</div>
		</div>
	</body>
</html>

<script>
	new Vue({
		el: "#app",
		data: {
			mobile: "",
			email: "",
			realname: "",
			errors: [],
			isCheck: false,
			user: [{
					id: 1,
					mobile: '18518393112',
					email: '123131@qq.com',
					realname: '邓超',
					status: false
				},
				{
					id: 2,
					mobile: '18518393000',
					email: '3322441@qq.com',
					realname: '戎飞',
					status: false
				}
			]
		},
		methods: {
			//添加
			add() {
				if (this.checkForm()) {
					//window.location.href = 'success.html'
					var obj = {
						id: this.user.length + 1,
						mobile: this.mobile,
						email: this.email,
						realname: this.realname,
						status: false
					}
					this.user.push(obj);
				}
			},
			//表单验证
			checkForm() {
				this.errors = [];
				if (this.mobile == '') {
					this.errors.push('手机号不能为空');
					return false;
				}
				var regMobile = /^1[35789]\d{9}$/;
				if (!regMobile.test(this.mobile)) {
					this.errors.push('手机号格式不正确');
					return false;
				}
				if (this.email == '') {
					this.errors.push('邮箱不能为空');
					return false;
				}
				var regEmail = /^\w{6,30}@\w{2,6}\.+(com|cn)$/;
				if (!regEmail.test(this.email)) {
					this.errors.push('邮箱格式为空');
					return false;
				}
				if (this.realname == '') {
					this.errors.push('真实姓名不能为空');
					return false;
				}
				var regRealname = /^[\u4e00-\u9fa5]{2,5}$/i;
				if (!regRealname.test(this.realname)) {
					this.errors.push('真实姓名格式不正确');
					return false;
				}

				if (this.errors.length == 0) {
					return true;
				} else {
					return false;
				}
			},
			//全选
			checkAll() {
				this.user.map(function(v, k) {
					v.status = true;
				});
			},
			//全不选
			checkNo() {
				this.user.map(function(v, k) {
					v.status = false;
				});
			},
			//反选
			checkRev() {
				this.user.map(function(v, k) {
					v.status = !v.status;
				});
			},
			//删除
			del(k) {
				this.user.splice(k, 1);
			},
			//批量删除
			checkDel() {
				var arr = [];
				this.user.map(function(v, k) {
					if (v.status == false) {
						arr.push(v);
					}
				});
				this.user = arr;
			},
			//点击复选框，全选/取消全选
			check() {
				if (this.isCheck == false) {
					this.user.map(function(v, k) {
						v.status = true;
					});
				} else {
					this.user.map(function(v, k) {
						v.status = false;
					});
				}
			}

		}
	});
</script>

这篇关于Vue-表单验证-全选-反选-删除-批量删除的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Vue-表单验证-全选-反选-删除-批量删除

相关编程文章