SOURCE

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  
            }  
        }  
    }  
})  

<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>  

*{  
            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;  
              
        }