zookeeper python接口实例详解
242
2023-06-04
详解Vue2 无限级分类(添加,删除,修改)
本人对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() {
return this.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)
}
}
})
new Vue({
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)
}
}
});
}
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~