Vue.js实现可编辑的表格

时间：2021-05-26

本文实例为大家分享了Vue.js实现可编辑的表格的具体代码，供大家参考，具体内容如下

<!DOCTYPE html><html><head> <title></title> <link rel="stylesheet" type="text/css" href="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 id="app"><button class="btn btn-primary btn-sm addBox" @click="addBox">添加</button><button class="btn btn-sm btn-danger delAll" @click="delAll">批量删除</button> <table class="table table-bordered" > <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)" class="btn btn-danger btn-sm">删除</button><button @click="update(index)" class="btn btn-info btn-sm">编辑</button></td> </tr> </tbody> </table><fieldset v-show="seen" > <legend>新增用户</legend> <div class=""> <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 class="btn btn-success btn-sm submit" @click="add">提交</button> </p></div></fieldset> <!-- 编辑界面 --><fieldset v-show="editSeen"> <legend>编辑用户</legend><div class=""> <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 class="btn btn-success btn-sm submit" @click="editSubmit">提交</button> </p></div></fieldset> </div> <script type="text/javascript" src="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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章