bootstrap+vue实现表格的添加删除

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><link rel="stylesheet"

ygy211715

4194人浏览 · 2018-06-01 11:13:15

ygy211715 · 2018-06-01 11:13:15 发布

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
		<script src="bootstrap/js/jquery-3.2.0.min.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div class="container">
			<h2 class="text-center">用户管理</h2>
			<form action="" method="post" 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="添加" class="btn btn-primary" @click="addUser">
					<input type="button" 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>序号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>邮箱</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(user,index) in users" class="text-center">
						<td>{{index+1}}</td>
						<td>{{user.name}}</td>
						<td>{{user.age}}</td>
						<td>{{user.email}}</td>
						<td>
							<button class="btn-danger btn-sm" data-toggle = "modal" data-target="#del" @click="nowIndex=index;names=user.name">删除</button>
						</td>
					</tr>
					<tr>
						<td colspan="5" class="text-center">
							<button class="btn-danger btn-sm" data-toggle = "modal" data-target="#del" @click="nowIndex=-1">全部删除</button>
						</td>
					</tr>
				</tbody>
			</table>
			<div id="del" class="modal">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button class="close" data-dismiss = "modal">
								<span>×</span>
							</button>
							<h4 class="modal-title"v-show="nowIndex!==-1">确认删除用户{{names}}么？</h4>
							<h4 class="modal-title" v-show="nowIndex===-1">确认删除所有用户么？</h4>
						</div>
						<div class="modal-body text-center">
							<button class="btn btn-primary" data-dismiss = "modal">取消</button>
							<button class="btn btn-primary" data-dismiss = "modal" @click="deleteUser">确认</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	
		<script type="text/javascript">
			window.οnlοad=function(){
				new Vue({
					el:".container",
					data:{
						users:[
							{
							"name":"丁丁",
							"age":18,
							"email":"1302614474@qq.com"
							},
							{
							"name":"lili",
							"age":28,
							"email":"1302614464@qq.com"
							}
						],
						user:{},
						names:'',
						nowIndex:''//这是用来传递删除用户的下标
					},
					methods:{
						addUser:function(){
							this.users.push(this.user);
							this.user=""
						},
						deleteUser:function(){
							if(this.nowIndex==-1){
								this.users=[];
							}else{
								this.users.splice(this.nowIndex,1);
							}
						}
					}
				})
			}
		</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}$/, //不连续的两位字母// /^