HTML代码：
这里使用x-template全局属性，页面加载不显示，但是可供js使用
js代码：
//加载树形结构初始数据，可用ajax获取
var data = {
name: 'My Tree',children: [
{ name: '一级' },{ name: '一级' },{
name: '一级有子菜单',children: [{
name: '二级有子菜单',children: [
{ name: '三级' },{ name: '三级' }
]
},{ name: '二级' },{ name: '二级' }
]
}
]
}
Vue.component（'item',{//获取全局组件（可用于注册组件）
template: '#item-template',props: {
model: Object//定义model数据格式
},data: function（） {
return {
open: false//vue对样式改变操作，true显示 false不显示
}
},computed: {//读取写入函数，不写get,set则为只读
isFolder: function（） {
return this.model.children
}
},methods: {
toggle: function（） {
if（this.isFolder） {
this.open = !this.open//打开树形结构
}
}
}
}）
潍坊长途汽车站
var demo = new Vue（{//创建一个vue实例，绑定树形数据
el: '#demo',data: {
treeData: data
}
}）
以上所述是小编给大家介绍的vue.js树形组件之删除双击增加分支实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/vue/41230.html