vue文件树组件使用（附代码）

这次给大家带来vue文件树组件使用（附代码），使用vue文件树组件的注意事项有哪些，下面就是实战案例，一起来看一下。

本文主要是分析vue官方仓库里的文件树组件[vue github]

demo可以查看 https://codepen.io/shayminsky21/pen/xXwxgm

首先是html模板：

登录后复制

接下来是组件部分的源码：

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'  })  //点击文件夹里的+节点触发 为文件夹添加一个新文件 }    }})

登录后复制

所以设计思路就是通过判断对象是否有子节点来决定是文件夹还是文件，然后通过递归复用组件来展示文件树的效果。

最后是传入组件的数据格式：

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: 'wat' },  {   name: 'child folder',   children: [   { name: 'hello' },   { name: 'wat' }   ]  }  ] } ]}

登录后复制

大家可以根据这个基本的结构继续拓展文件树的功能和展示效果。

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

vue中ajax请求与axios包完美处理

jquery获取上传文件详细信息

以上就是vue文件树组件使用（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！