vue文件树组件使用详解
本文实例为大家分享了vue文件树组件的实现方法，供大家参考，具体内容如下
本文主要是分析vue官方仓库里的文件树组件[vuegithub]
demo可以查看https://codepen.io/shayminsky21/pen/xXwxgm
首先是html模板：
//显示文件名
{{model.name}}
//若是文件夹的话则显示[+]来控制文件夹的开关闭合
[{{open?'-':'+'}}]
接下来是组件部分的源码：
Vue.component('item',{
template:'#item-template',
props:{
model:Object//将文件数据通过props传入
},
data:function(){
return{
open:false//open表示文件夹闭合状态
}
},
computed:{
isFolder:function(){
returnthis.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:'newstuff'
})//点击文件夹里的+节点触发为文件夹添加一个新文件
}
}
})
所以设计思路就是通过判断对象是否有子节点来决定是文件夹还是文件，然后通过递归复用
最后是传入组件的数据格式：
vardata={
name:'MyTree',
children:[
{name:'hello'},
{name:'wat'},
{
name:'childfolder',
children:[
{
name:'childfolder',
children:[
{name:'hello'},
{name:'wat'}
]
},
{name:'hello'},
{name:'wat'},
{
name:'childfolder',
children:[
{name:'hello'},
{name:'wat'}
]
}
]
}
]
}
大家可以根据这个基本的结构继续拓展文件树的功能和展示效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。