<!DOCTYPE html>
<html>
<head>
<meta >
<title>实验2</title>
<script src="../vue.js"></script>
<style>
#table{
padding: 0 10px;
}
#table table{
width: 100%;
font-size: 14px;
border: 1px solid #eee;
}
table thead th {
background: #f5f5f5;
padding: 10px;
text-align: left;
}
table tbody td{
padding: 10px;
text-align: left;
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
}
table tbody td span {
margin: 0 10px;
cursor: pointer;
}
.delete {
color: red;
}
.edit{
color: #008cd5;
}
.add{
border: 1px solid #eee;
margin: 10px 0;
padding: 15px;
}
input{
border: 1px solid #eee;
margin: 10px ;
padding: 15px;
}
button{
background: #008cd5;
border: 0;
padding: 4px;
border-radius: 3px;
color: #fff;
}
#mask{
background: rgba(0, 0, 0, .5);
width: 100%;
height: 100%;
position: fixed;
z-index: 4;
top: 0;
left: 0;
}
.mask{
width: 400px;
height: 380px; /*这里就是调那个修改窗口的大小呀！还有颜色呀，背景这些呀*/
background: rgba(255, 255, 255, 1);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
z-index: 47;
border-radius: 5px;
}
.title{
padding: 10px;
border-bottom: 1px solid #eee;
}
.title span {
float: right;
cursor: pointer;
}
.content{
padding: 10px;
}
.content input{
width: 200px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div id="table">
<div class="add">
<label>学号:</label>
<input type="text" v-model="addStudent.stuNo" name="stuNo" placeholder="请输入学号" /> <!--v-for循环遍历stuList数组，v-model进行数据的双向绑定-->
<label>姓名:</label>
<input type="text" v-model="addStudent.stuName" name="stuName" placeholder="请输入学号" />
<label>班级:</label>
<input type="text" v-model="addStudent.stuClass" name="stuClass" placeholder="请输入学号" />
<label>专业:</label>
<input type="text" v-model="addStudent.stuMajor" name="stuMajor" placeholder="请输入学号" />
<button @click="add">添加</button>
</div>
<table>
<thead>
<tr>
<th>序号</th>
<th>学号</th>
<th>姓名</th>
<th>班级</th>
<th>专业</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in stuList">
<td>{{ index+1 }}</td>
<td>{{ item.stuNo }}</td>
<td>{{ item.stuName }}</td>
<td>{{ item.stuClass }}</td>
<td>{{ item.stuMajor }}</td>
<td>
<span @click="deletelist(item.id,index)" class="delete">删除</span>
<span @click="edit(item)" class="edit">编辑</span>
</td>
</tr>
</tbody>
</table>
<div id="mask" v-if="editlist"> <!--当按下编辑，然后就有editlist变成了ture了，就弹出这个界面-->
<div class="mask">
<div class="title">
编辑<span @click="editlist=false">x</span>
</div>
<div class="content">
<div class="input-item">
<label>学号:</label>
<input type="text" v-model="editStudent.stuNo" name="stuNo" placeholder="请输入学号" />
</div>
<div class="input-item">
<label>姓名:</label>
<input type="text" v-model="editStudent.stuName" name="stuName" placeholder="请输入学号" />
</div>
<div class="input-item">
<label>班级:</label>
<input type="text" v-model="editStudent.stuClass" name="stuClass" placeholder="请输入学号" />
</div>
<div class="input-item">
<label>专业:</label>
<input type="text" v-model="editStudent.stuMajor" name="stuMajor" placeholder="请输入学号" />
</div>
<div class="input-item" style="text-align: center;">
<button @click="update">更新</button> <!--写到这里了，就要写updata的方法了，就是要修改过后的值修改到存在数据哪里-->>
<button @click="editlist=false">取消</button>
</div>
</div>
</div>
</div>
</div>
<script>
new Vue({
el:'#table',
data() { //数据部分
return {
addStudent:{}, //存放添加信息的数据
editlist:false,
editStudent:{},
stuList:[
{
stuNo:'20190101001',
stuName:'令狐冲',
stuClass:'19大数据技术1班',
stuMajor:'大数据技术'
},
{
stuNo:'20190101002',
stuName:'天博光',
stuClass:'19大数据技术1班',
stuMajor:'大数据技术'
},
{
stuNo:'20190101003',
stuName:'不可不戒',
stuClass:'19大数据技术1班',
stuMajor:'大数据技术'
},
{
stuNo:'20190101004',
stuName:'曲阳',
stuClass:'19大数据技术1班',
stuMajor:'大数据技术'
评论0