<!DOCTYPE html> <html> <head> <title></title> <link type="text/css" href="https://www.jb51.net/bootstrap.min.css" > <style type="text/css"> table tr td{ text-align: center; } .btn-info{ margin-left: 5px; } .add,.addBox{ margin: 10px 0px 10px 10px; } .submit{ margin-left: 172px; } /*全删*/ .delAll{ margin-left: 10px; } /*新增*/ fieldset{ margin-left: 10px; } </style> </head> <body> <div> <button @click="addBox">添加</button> <button @click="delAll">批量删除</button> <table > <thead> <tr> <td><input type="checkbox" @click="allSelect" v-model="checked"></td> <td>学号</td> <td>姓名</td> <td>年纪</td> <td>操作</td> </tr> </thead> <tbody> <tr v-for="person,index in people"> <td><input type="checkbox" v-model="selected" v-bind:value="person.sid"></td> <td @click="edit(index)" contenteditable="true">{{person.sid}}</td> <td @click="edit(index)" contenteditable="true">{{person.sname}}</td> <td @click="edit(index)" contenteditable="true">{{person.sage}}</td> <td><button @click="del(index)">删除</button><button @click="update(index)">编辑</button></td> </tr> </tbody> </table> <fieldset v-show="seen" > <legend>新增用户</legend> <div> <p> <label>学号：</label> <input type="text" v-model="newPeople.sid"> </p> <p> <label>姓名：</label> <input type="text" v-model="newPeople.sname"> </p> <p> <label>年龄：</label> <input type="number" v-model="newPeople.sage"> </p> <p> <button @click="add">提交</button> </p> </div> </fieldset> <!-- 编辑界面 --> <fieldset v-show="editSeen"> <legend>编辑用户</legend> <div> <p> <label>学号：</label> <input type="text" v-model="editPeople.sid" value="{{sid}}"> </p> <p> <label>姓名：</label> <input type="text" v-model="editPeople.sname" value="{{sname}}"> </p> <p> <label>年龄：</label> <input type="number" v-model="editPeople.sage" value="{{sage}}"> </p> <p> <button @click="editSubmit">提交</button> </p> </div> </fieldset> </div> <script type="text/javascript" src="https://www.jb51.net/vue.min.js"></script> <script type="text/javascript"> var data ={ people:[ {'sid':'1043','sname':'张三','sage':18}, {'sid':'2434','sname':'赵六','sage':43}, {'sid':'3424','sname':'李四','sage':42}, {'sid':'1231','sname':'王五','sage':35} ], newPeople:{ 'sid':'','sname':'','sage':'' }, seen:false, editSeen:false, checked:false, selected:[], editPeople:{ 'sid':'','sname':'','sage':'' } } ; var app = new Vue({ 'el':'#app', data:data, methods:{ // 添加 addBox:function(){ this.seen = this.seen == false ? true : false; }, //删除 del:function(index){ console.log(11); this.people.splice(index,1); }, //提交 add:function(){ //插入到people中 this.people.push(this.newPeople); this.newPeople = {}; this.seen = false }, //全选 allSelect:function(){ if(this.selected.length != this.people.length){ this.selected = []; for(var i = 0; i<this.people.length;i++){ this.selected.push(this.people[i].sid); console.log(this.people[i].sid); } }else{ this.selected = []; } }, //批量删除 delAll:function(){ for(var j = 0; j< this.selected.length;j++){ for(var i = 0; i< this.people.length; i++){ if(this.selected[j] == this.people[i].sid){ this.people.splice(i,1); } } } }, //编辑 update:function(index){ this.editSeen = true; this.editPeople = this.people[index]; }, //编辑后提交 editSubmit:function(){ this.editSeen = false; } }, watch:{ "selected":function(){ if(this.selected.length == this.people.length){ this.checked = true; }else{ this.checked = false; } } } }) </script> </body> </html>
