vue.js实现成绩查询、新增、修改

最新推荐文章于 2024-09-12 12:37:49 发布

tanmuxue

最新推荐文章于 2024-09-12 12:37:49 发布

阅读量1w

点赞数 1

分类专栏： vue.js

vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue.js实现成绩查询、新增、修改

原文地址 http://www.cnblogs.com/xwwin/p/5816527.html

*{
			margin:0;
			padding:0;
		}
		.report_card{
			width:800px;
			margin:0 auto;
			font-size:12px;
		}
		.report_card table{
			width:100%;
			border-collapse: collapse;
			text-align:center;
		}
		.report_card caption{
			font-size:14px;
			text-align:left;
			line-height:30px;
			font-weight:bold;
		}
		.report_card table th,.report_card table td{
			border:1px solid #ccc;
		}
		.report_card table th{
			height:36px;
			background:#f8f8f8;
		}
		.report_card table td{
			height:32px;
			background:#f8f8f8;
		}
		.content{
			width:100%;
			height:32px;
			line-height:32px;
			position:relative;
		}
		.content input{
			position:absolute;
			top:0;
			left:0;
			width:100%;
			color:#999;
			padding-left:10px;
			-webkit-box-sizing:border-box;
			box-sizing:border-box;
			height:30px;
			border:1px solid blue;
			-webkit-animation:borderAn 2s infinite;
			animation:borderAn 2s infinite;
		}
		.studyForm select{
			width:100px;
			height:28px;
		}
		.searchInput{
			width:200px;
			height:28px;
		}
		.searchButton{
			width:100px;
			height:32px;
		}
		@-webkit-keyframes borderAn{
			0%{
				border-color:transparent;
			}
			100%{
				border-color:blue;
			}
		}
		@keyframes borderAn{
			0%{
				border-color:transparent;
			}
			100%{
				border-color:blue;
			}
		}
		.studyForm{
			margin:10px 0;
		}
		.studyForm input{
			width:120px;
			height:30px;
			
		}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue成绩单</title>
</head>
<body>
<div class="report_card" id="reportCard">
	<table class="studyForm">
		<caption>成绩录入/处理</caption>
		<tbody>
		<tr>
			<td width="170">学号:<input type="text" v-model="addArr.stuId"></td>
			<td width="170">姓名:<input type="text" v-model="addArr.name"></td>
			<td width="170">语文:<input type="text" v-model="addArr.ywScores"></td>
			<td width="170">数学:<input type="text" v-model="addArr.sxScores"></td>
			<td colspan="2" width="120">
				<a href="javascript:void(0);" v-on:click="submitStu">录入</a>
				<a href="javascript:void(0);" v-on:click="resetStu">重置</a>
			</td>
		</tr>
		<tr>
			<td align="left">
				搜索：<input v-model="searchTxt" type="text" class="searchInput">
			</td>
			<td>
				排序字段:
				<select v-model='sortKey'>
					<option value="ywScores">语文</option>
					<option value="sxScores">数学</option>
				</select>
			</td>
			<td>
				排序类型：
				<select v-model="sortClass">
					<option value="1">升序</option>
					<option value="-1">降序</option>
				</select>
			</td>
			<td colspan="3"></td>
		</tr>
		</tbody>
	</table>
	<table class="scoreList">
		<caption>成绩列表</caption>
		<thead>
		<th width="170">学号</th>
		<th width="170">姓名</th>
		<th width="170">语文</th>
		<th width="170">数学</th>
		<th colspan="2" width="120">操作</th>
		</thead>
		<tbody>
		<tr v-for="item in studyArr | filterBy searchTxt | orderBy sortKey sortClass">
			<td><div class="content">{{item.stuId}}<input v-model="editArr.stuId" type="text" v-if="$index==nowEditCol"></div></td>
			<td><div class="content">{{item.name}}<input v-model="editArr.name" type="text" v-if="$index==nowEditCol"></div></td>
			<td><div class="content">{{item.ywScores}}<input v-model="editArr.ywScores" type="text" v-if="$index==nowEditCol"></div></td>
			<td><div class="content">{{item.sxScores}}<input v-model="editArr.sxScores" type="text" v-if="$index==nowEditCol"></div></td>
			<td>
				<a href="javascript:void(0);" v-on:click="startEdit($index)" v-if="$index!=nowEditCol">编辑</a>
				<a href="javascript:void(0);" v-on:click="cancelEdit" v-if="$index==nowEditCol">取消</a>
				<a href="javascript:void(0);" v-on:click="sureEdit($index)" v-if="$index==nowEditCol">确认</a>
			</td>
			<td><a href="javascript:void(0);" v-on:click="deleteStu($index)">删除</a></td>
		</tr>
		</tbody>
	</table>
</div>

</body>
</html>

	var studyArrJson=[
		{'stuId':'stu0001','name':'张三','ywScores':85,'sxScores':90},
		{'stuId':'stu0002','name':'李四','ywScores':88,'sxScores':85},
		{'stuId':'stu0003','name':'王五','ywScores':65,'sxScores':75},
		{'stuId':'stu0004','name':'刘六','ywScores':58,'sxScores':96}
	];
	var reportCardVm=new Vue({
		el:'#reportCard',
		data:{
			studyArr:studyArrJson,//成绩花名册
			addArr:{'stuId':'','name':'','ywScores':'','sxScores':''},//新增的表单字段
			nowEditCol:-1,//当前编辑的行
			editStatus:false,//当前是否在编辑状态
			searchTxt:'',//搜索字段
			sortKey:'ywScores',//排序健
			sortClass:'1',//升降排序1为升,-1为降
		},
		methods:{
			//启动索引index数据编辑
			startEdit:function(index){
				this.nowEditCol=index;
			},
			//取消编辑状态
			cancelEdit:function(){
				this.nowEditCol=-1;
			},
			//启动索引index数据修改确认
			sureEdit:function(index){
				this.studyArr.$set(index,this.editArr);
				this.nowEditCol=-1;
			},
			//删除索引index数据
			deleteStu:function(index){
				this.studyArr.splice(index,1);
			},
			//新增成绩
			submitStu:function(){
				var addArr={
					'stuId':this.addArr.stuId,
					'name':this.addArr.name,
					'ywScores':this.addArr.ywScores,
					'sxScores':this.addArr.sxScores
				};
				this.studyArr.push(addArr);
				this.resetStu();
			},
			//复位新增表单
			resetStu:function(){
				this.addArr={
					'stuId':'',
					'name':'',
					'ywScores':'',
					'sxScores':''
				}
			}
		},
		computed:{
			//存储当前编辑的对象
			editArr:function(){
				var editO=this.studyArr[this.nowEditCol];
				return {
					'stuId':editO.stuId,
					'name':editO.name,
					'ywScores':editO.ywScores,
					'sxScores':editO.sxScores
				}
			}
		}
	})