Vue.js实现可编辑的表格       这篇文章主要为大家详细介绍了Vue.js实现可编辑的表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
link rel="stylesheet" type="text/css" href="bootstrap.min.css" style type="text/css" table tr td{ text-align: center; .{ 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 @click="addBox" 添加 /button button @click="delAll" 批量删除 /button table thead 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 class="" label 学号： /label input type="text" v-model="newPeople.sid" label 姓名： /label input type="text" v-model="newPeople.sname" label 年龄： /label input type="number" v-model="newPeople.sage" button @click="add" 提交 /button /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];