How to apply vue file tree component

This time I will show you how to apply the vue file tree component, and what are the precautions for using the vue file tree component. The following is a practical case, let's take a look.

First is the html template:

<li>
  <p
   //文件夹加粗表示
   :class="{bold: isFolder}" 
   //处理单击事件 打开闭合文件列表            
   @click="toggle"  
   //处理双击事件 双击子文件，子文件属性变为文件夹               
   @dblclick="changeType">  
   //显示文件名      
   {{model.name}}
  //若是文件夹的话则显示[+]来控制文件夹的开关闭合
   <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
  </p>
  <ul v-show="open" v-if="isFolder">
  //利用v-for显示子文件列表，通过递归使用item组件来完成文件树
   <item
   class="item"
   v-for="model in model.children"
   :model="model">
   </item>
   //增加一个+标记，单击可以增加子文件
   <li class="add" @click="addChild">+</li>
  </ul>
</li>

Next is the source code of the component part:

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

So the design idea is to determine whether the object has child nodes to determine whether it is a folder or file, and then recursively reuse the component to display the effect of the file tree.

Finally is the data format of the incoming component:

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' }
   ]
  }
  ]
 }
 ]
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to use angular4 shared component communication

Use postman json springmvc to make batch additions

The above is the detailed content of How to apply vue file tree component. For more information, please follow other related articles on the PHP Chinese website!