最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
详解Vue2 无限级分类(添加,删除,修改)
时间:2017-06-02 编辑:简简单单 来源:一聚教程网
本人对vue不是很懂,搜索了很多关于Vue2 无限级分类介绍,下面我来记录一下,有需要了解Vue2 无限级分类的朋友可参考。希望此文章对各位有所帮助。
代码如下 | 复制代码 |
a{color:#333; text-decoration: none;} ul{padding-left: 15px;}
{{items}}
window.onload =function(){ //treelist组件 Vue.component('treelist', { template:'#treelist-template', props: { item: Object }, data:function() { return{ open:false } },
computed: { isFolder:function() { returnthis.item.children &&this.item.children.length } },
methods: { toggle:function() { if(this.isFolder) { this.open = !this.open } },
addChild:function() { /*添加内容但不同步到服务器*/ if(!this.isFolder) { Vue.set(this.item,'children', []) } this.open =true this.item.children.push({ sort: 0, name:'', status: 1, parent_id:this.item['id'] }) }, delItem:function(index){ this.item['children'].splice(index, 1) } } })
newVue({ el:'#app', data:{ mydata: {}, items: [ {"id":"10","parent_id":"0","sort":"0","name":"其它","status":"0"}, {"id":"12","parent_id":"0","sort":"0","name":"测试","status":"0"}, {"id":"1","parent_id":"0","sort":"0","name":"水果","status":"0", "children":[ {"id":"4","parent_id":"1","sort":"0","name":"香蕉","status":"0"} ] }, {"id":"2","parent_id":"0","sort":"0","name":"饮料","status":"0", "children":[ {"id":"5","parent_id":"2","sort":"0","name":"可乐","status":"0"}, {"id":"6","parent_id":"2","sort":"0","name":"酒水","status":"0", "children":[ {"id":"7","parent_id":"6","sort":"0","name":"啤酒","status":"0"} ] } ] }, {"id":"3","parent_id":"0","sort":"0","name":"美食","status":"0", "children":[ {"id":"8","parent_id":"3","sort":"0","name":"红烧鱼","status":"0"} ] } ] },
methods: { add:function(){ this.mydata['id'] = 100;//从服务器返回的ID号 this.mydata['status'] = 0; this.mydata['parent_id'] = 0; this.items.push(this.mydata); this.mydata = {}; },
delItem:function(index){ this.items.splice(index, 1) } } }); }
|
相关文章
- 完整的新闻无限级分类代码,可添加,删除,移动,修改 12-20
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31