bootstrap+vue实现表格的添加删除
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><link rel="stylesheet"
·
<!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>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献9条内容
所有评论(0)