vue可填写表格_Vue.js实现可编辑的表格

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

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;

}

添加

批量删除

学号姓名年纪操作

{{person.sid}}{{person.sname}}{{person.sage}}删除编辑

新增用户

学号：

姓名：

年龄：

提交

编辑用户

学号：

姓名：

年龄：

提交

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

}

}

}

})

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

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！