效果图如下:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/18d77557432bac7226a720ecc546ba58.png)
以下是实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<style>
*{margin:0;padding:0;}
#app{
width:800px;
margin:50px auto;
}
.active {
background-color: #f5f5f5
}
.mask {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .35);
}
.mask .dialog {
position: absolute;
width: 400px;
height: 200px;
left: 0;
right: 0;
top: 50px;
margin: auto;
}
</style>
</head>
<body>
<div id="app">
<add @add="add" @deletes="deletes"></add>
<tablelist :students="students" v-show="students.length" @show="show"></tablelist>
<hide v-if="isShow" @close="close"></hide>
</div>
<template id="add">
<form>
<div class="form-group">
<label for="exampleInputEmail1" class='h4'>学生姓名</label>
<input type="text" v-model='username' class="form-control" id="exampleInputEmail1" placeholder="请输入学生姓名" v-model='username'>
</div>
<div class="form-group">
<label for="exampleInputPassword1" class='h4'>联系方式</label>
<input type="text" v-model='phone' class="form-control" id="exampleInputPassword1" placeholder="请输入联系方式" v-model='phone'>
</div>
<button type="submit" class="btn btn-default" @click.prevent="add">添加学生</button>
<button type="submit" class="btn btn-default" @click.prevent="deletes">删除选中的学生</button>
</form>
</template>
<template id='tablelist'>
<div>
<table class='table table-hover'>
<caption class='h3'>学生信息表</caption>
<tr>
<td>选择</td>
<td>学生姓名</td>
<td>联系方式</td>
<td>删除</td>
</tr>
<tr v-for="(student,index) in students">
<td>
<input type="checkbox" v-model="student.isSelected">
</td>
<td>{{student.username}}</td>
<td>{{student.phone}}</td>
<td>
<button class='btn btn-danger btn-xs glyphicon glyphicon-trash' @click="fn(index)"></button>
</td>
</tr>
</table>
</div>
</template>
<template id='hide'>
<div class='mask'>
<div class="dialog">
<div tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">你确定要删除吗</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" @click="cancel">取消</button>
<button type="button" class="btn btn-primary" @click="confirm">确定</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
let add = {
template:'#add',
data() {
return {
username: '',
phone: '',
}
},
methods:{
add(){
if( !this.username || !this.phone )return;
this.$emit('add',this.username,this.phone);
this.username = '';
this.phone = '';
},
deletes(){
this.$emit('deletes');
}
}
}
let tablelist = {
props:['students'],
template:'#tablelist',
methods:{
fn(index){
this.$emit('show',index)
}
}
}
let hide = {
template:'#hide',
methods:{
cancel(){
this.$emit('close',false)
},
confirm(){
this.$emit('close',true)
}
}
}
let vm = new Vue({
el:'#app',
data:{
students:[],
isShow:false,
num:'',
},
components:{
add,
tablelist,
hide
},
methods:{
add(username,phone){
this.students.push({
username,
phone,
isSelected:false
})
},
deletes(){
for(let i=this.students.length-1; i>=0; i--){
if(this.students[i].isSelected){
this.students.splice(i,1)
}
}
},
show(index){
this.num = index;
this.isShow = true;
},
close(bool){
this.isShow = false
if(bool){
this.students.splice(this.num,1)
}
}
},
watch:{
students:{
handler(){
console.log('数据改变了 我监控到了')
localStorage.setItem('heaven',JSON.stringify(this.students))
},
deep:true,
}
},
created(){
this.students = JSON.parse(localStorage.getItem('heaven'))||[];
}
})
</script>
</body>
</html>