好资源导航 » 文章资讯 » Vue.js实现可编辑的表格

Vue.js实现可编辑的表格

2023-08-04 16:29:04 140

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







tabletrtd{
text-align:center;
}
.btn-info{
margin-left:5px;
}

.add,.addBox{
margin:10px0px10px10px;
}
.submit{
margin-left:172px;
}
/*全删*/
.delAll{
margin-left:10px;
}
/*新增*/
fieldset{
margin-left:10px;
}





添加
批量删除




学号
姓名
年纪
操作






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






新增用户


学号：



姓名：



年龄：



提交

编辑用户

学号：

姓名：

年龄：

提交

vardata={ 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':'' } }; varapp=newVue({ '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(vari=0;i

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

Vue.js实现可编辑的表格

热门推荐

随机推荐