<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 1000px;
margin: 50px auto 0;
}
.box1{
width: 100%;
height: 70px;
font-size: 20px;
display: flex;
}
.box1 p{
margin-left: 10px;
color: #666363;
}
.box1 input{
width: 300px;
height: 30px;
font-size: 14px;
margin-left: 10px;
border-radius: 5px;
border: 2px solid #dddbdb;
}
.box1 input::-webkit-input-placeholder{
font-size: 14px;
color: #c3bfbf;
}
.box1 button{
width: 80px;
height: 32px;
margin: 0 10px;
color: #fff;
border: none;
border-radius: 5px;
}
.addSum{
width: 100px;
height: 50px;
color: #fff;
border: none;
font-size: 16px;
border-radius: 5px;
background-color: rgb(6, 175, 119);
}
.box2{
border: 1px solid #dddbdb;
margin-top: 50px;
}
/* .box3{
} */
.box3_2{
width: 100%;
height: 100%;
position: fixed;
top: 0px;
background-color: rgba(0, 0, 0, 0.5);
}
.box3_1{
width: 600px;
height: 470px;
position: fixed;
border: 1px solid red;
top: 50%;
left: 50%;
z-index: 1;
border-radius: 5px;
margin-left: -300px;
margin-top: -235px;
background-color: #ffffff;
}
.box3_1 div{
margin: 45px 50px 0;
}
.box3_1 input{
margin-left: 40px;
width:400px ;
height: 25px;
border: 1px solid #c1baba;
}
.box3_1 input::-webkit-input-placeholder{
color: red;
font-size: 2px;
}
.box3_1 span{
color: red;
}
.box3_1 button{
width: 100px;
height: 50px;
border: none;
border-radius: 5px;
color: #fff;
}
.button_left{
background-color: rgba(3, 120, 209, 0.411);
margin: 30px 0 0 130px;
}
.button_right{
background-color: rgba(7, 140, 18, 0.303);
margin: 30px 0 0 200px;
}
td button{
border: none;
color: #fff;
font-size: 14px;
background-color: rgba(74, 73, 75, 0.226);
border-radius: 3px;
margin-left: 5px ;
}
.titles span {
width: 30px;
height: 30px;
position: absolute;
top: 4px;
left: 560px;
z-index: 2;
font-size: 28px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<!-- 最大盒子 -->
<div class="box">
<!-- 查询区 -->
<div class="box1">
<p>关键词:</p>
<input type="text" placeholder="请输入学号查询" v-model="searchText">
<button style="background-color: rgb(208, 23, 23);" @click="search()">查询</button>
<button style="background-color: rgb(206, 126, 7);" @click="reset()">重置</button>
</div>
<!-- 新增 -->
<button class="addSum" @click="setState('added',null)">+ 新增</button>
<!-- 表格 -->
<div class="box2">
<table width="1000" cellspacing="25" cellpadding="0" align="center">
<thead align="center">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>学号</th>
<th>操作</th>
</tr>
</thead>
<tbody align="center">
<tr v-for="(index,item) in listData" :key="index.id">
<td>{{item+1}}</td>
<td>{{index.userName}}</td>
<td>{{index.age}}</td>
<td>{{index.sex}}</td>
<td>{{index.schoolNum}}</td>
<td>
<button class="delete" @click="delets(index)">删除</button>
<button class="edit" @click="setState('update',index)">修改</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 新增界面 -->
<div class="box3" v-show="flag">
<div class="box3_1" >
<div class="titles">
{{state=='added'?'新增':'修改'}}
<span @click="flag=false">×</span>
</div>
<div><span>*</span><b>姓名</b><input type="text" v-model="obj.userName"></div>
<div><span>*</span><b>年龄</b><input type="text" v-model="obj.age"></div>
<div><span>*</span><b>性别</b><input type="text" v-model="obj.sex"></div>
<div><span>*</span><b>学号</b><input type="number" v-model="obj.schoolNum"></div>
<button class="button_left" @click="submmit()" :disabled="!obj.userName||!obj.age||!obj.sex||!obj.schoolNum">{{state=='added'?'新增':'修改'}}</button>
<button class="button_right" @click="flag=false">取消</button>
</div>
<div class="box3_2"></div>
</div>
</div>
</div>
</body>
<script src="./vue.js"></script>
<script>
Vue.config.productionTip=false;
var vm =new Vue({
data(){
return{
cx:"",
state:"added",
flag:false,
lists:[
],
obj:{
userName:"",
age:"",
sex:"",
schoolNum:"",
},
searchText: ''
}
},
computed:{
listData() {
if (this.searchText === '') {
return this.lists;
} else {
return this.lists.filter(index => index.schoolNum.toLowerCase().includes(this.searchText.toLowerCase()));
}
}
},
directives:{
},
methods:{
setState(user,index){
this.flag=true;
this.state=user;
if(user=='added'){
this.obj = {};
}else{
this.obj = {...index};
}
},
submmit(){
//新增数据
if(this.state=='added'){
let _id=this.lists.length+1;
// 时间戳
this.lists.push({...this.obj,id:_id})
}
// 修改
else{
this.lists.forEach((index,a)=>{
// 修改值,判断
if(index.id==this.obj.id){
this.lists[a]=this.obj;
}
})
}
this.flag= false;
},
// 删除
delets(index){
// this.lists.splice(i,1);
// 过滤器拿id删除的数据
this.lists=this.lists.filter(item=>item.id !=index.id)
},
// 查询
search() {
},
reset() {
this.searchText = '';
}
}
// JSON.parse(JSON.stringify(obj))将浅拷贝变成深拷贝的方法之一
// 确定就是如果obj里面有函数那么里面的函数会失效，所以最好的方式就是递归的方式进行深拷贝，一级一级的判断
})
vm.$mount("#app")
</script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
