Vue成績單

時間 2020-04-18
標籤 vue 成績單简体版
原文原文鏈接
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>vue成績單</title> <style type="text/css"> *{ 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; } </style> </head> <body> <div class="report_card" id="reportCard"> <table class="studyForm"> <caption>成績錄入/處理</caption> <tbody> <tr> <td width="170">姓名:<input type="text" v-model="addArr.name"></td> <td width="170">語文:<input type="text" v-model="addArr.chinese"></td> <td width="170">數學:<input type="text" v-model="addArr.math"></td> <td width="170">英語:<input type="text" v-model="addArr.english"></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="chinese">語文</option> <option value="math">數學</option> <option value="english">英語</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.name}}<input v-model="editArr.stuId" type="text" v-if="item.stuId==nowEditCol"></div></td> <td><div class="content">{{item.chinese}}<input v-model="editArr.name" type="text" v-if="item.stuId==nowEditCol"></div></td> <td><div class="content">{{item.math}}<input v-model="editArr.ywScores" type="text" v-if="item.stuId==nowEditCol"></div></td> <td><div class="content">{{item.english}}<input v-model="editArr.sxScores" type="text" v-if="item.stuId==nowEditCol"></div></td> <td> <a href="javascript:void(0);" v-on:click="startEdit(item.stuId)" v-if="item.stuId!=nowEditCol">編輯</a> <a href="javascript:void(0);" v-on:click="cancelEdit" v-if="item.stuId==nowEditCol">取消</a> <a href="javascript:void(0);" v-on:click="sureEdit(item.stuId)" v-if="item.stuId==nowEditCol">確認</a> </td> <td><a href="javascript:void(0);" v-on:click="deleteStu(item.stuId)">刪除</a></td> </tr> </tbody> </table> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script> <script type="text/javascript"> var studyArrJson=[ {'name':'Bob','math':97,'chinese':89,"english":67}, {'name':'Tom','math':67,'chinese':52,"english":98}, {'name':'Jerry','math':72,'chinese':87,"english":89}, {'name':'Ben','math':92,'chinese':87,"english":89}, {'name':'Chan','math':47,'chinese':55,"english":92} ]; var reportCardVm=new Vue({ el:'#reportCard', data:{ studyArr:studyArrJson,//成績花名冊 addArr:{'name':'','math':'','chinese':'','english':''},//新增的表單字段 nowEditCol:-1,//當前編輯的行 editStatus:false,//當前是否在編輯狀態 searchTxt:'',//搜索字段 sortKey:'ywScores',//排序健 sortClass:'1',//升降排序1爲升,-1爲降 }, methods:{ //啓動索引index數據編輯 startEdit:function(id){ this.nowEditCol=id; }, //取消編輯狀態 cancelEdit:function(){ this.nowEditCol=-1; }, //啓動索引index數據修改確認 sureEdit:function(id){ for(var i=0,len=this.studyArr.length;i<len;i++){ if(id === this.studyArr[i]['stuId'] ){ this.studyArr.splice(i,1,this.editArr); break; } } this.nowEditCol=-1; }, //刪除索引index數據 deleteStu:function(id){ for(var i=0,len=this.studyArr.length;i<len;i++){ if(id === this.studyArr[i]['stuId'] ){ this.studyArr.splice(i,1); break; } } }, //新增成績 submitStu:function(){ var addArr={ 'stuId':this.addArr.name, 'name':this.addArr.math, 'chinese':this.addArr.chinese, 'english':this.addArr.english }; this.studyArr.push(addArr); this.resetStu(); }, //復位新增表單 resetStu:function(){ this.addArr={ 'name':'', 'math':'', 'chinese':'', 'english':'' } } }, computed:{ //存儲當前編輯的對象 editArr:function(){ var editO={}; for(var i=0,len=this.studyArr.length;i<len;i++){ if(this.nowEditCol === this.studyArr[i]['stuId'] ){ editO= this.studyArr[i]; break; } } return { 'stuId':editO.stuId, 'name':editO.name, 'ywScores':editO.ywScores, 'sxScores':editO.sxScores } } } }) </script> </body> </html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。