本文实例为大家分享了vue文件树组件的实现方法，供大家参考，具体内容如下
本文主要是分析vue官方仓库里的文件树组件[vue github]
demo可以查看 nofollow" target="_blank" href="https://codepen.io/shayminsky21/pen/xXwxgm">https://codepen.io/shayminsky21/pen/xXwxgm
首先是html模板：
rush:xhtml;">
接下来是组件部分的源码：
rush:js;">
Vue.component('item',{
template: '#item-template',props: {
model: Object //将文件数据通过props传入
},data: function () {
return {
open: false //open表示文件夹闭合状态
}
},computed: {
isFolder: function () {
return this.model.children &&
this.model.children.length
}
},//计算对象是否有子节点并且子节点数大于0来判断是否是文件夹
methods: {
toggle: function () {
if (this.isFolder) {
this.open = !this.open
}
},//控制文件夹闭合的方法 单击触发改变open
changeType: function () {
if (!this.isFolder) {
Vue.set(this.model,'children',[])
this.addChild()
this.open = true
}
},//双击触发，通过给文件增加子节点来使文件属性变成文件夹
addChild: function () {
this.model.children.push({
name: 'new stuff'
}) //点击文件夹里的+节点触发 为文件夹添加一个新文件
}
}
})
所以设计思路就是通过判断对象是否有子节点来决定是文件夹还是文件，然后通过递归复用
最后是传入组件的数据格式：
rush:js;">
var data = {
name: 'My Tree',children: [
{ name: 'hello' },{ name: 'wat' },{
name: 'child folder',children: [
{
name: 'child folder',children: [
{ name: 'hello' },{ name: 'wat' }
]
},{ name: 'hello' },{
name: 'child folder',{ name: 'wat' }
]
}
]
}
]
}
