Deep analysis of the use of Vue file tree components

This article mainly introduces the use of vue file tree component in detail for you, which has certain reference value. For those who need it, you can learn it by reference. If there are any shortcomings, we welcome criticism and correction.

First, html template:

<li>
  <div
   //Bold representation of folder
   :class="{bold: isFolder}"
   //Process click event to open closed file list            
   @click="toggle" 
   //Handle double click event double click sub file, sub file property changes to folder               
   @dblclick="changeType">  
   //Display file name      
   {{model.name}}
  //If it is a folder, display [+] to control the closing of the folder switch
   <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
  </div>
  <ul v-show="open" v-if="isFolder">
  //Using v-for to display the list of sub files, using item component recursively to complete the file tree
   <item
   class="item"
   v-for="model in model.children"
   :model="model">
   </item>
   //Add a + mark, click to add sub file
   <li class="add" @click="addChild">+</li>
  </ul>
</li>//Welcome to join the front-end full stack development and communication circle to blow water, chat, learn and exchange: 864305860

Next is the source code of the component part:

Vue.component('item', {
 template: '#item-template',
 props: {
 model: Object //Passing file data in through props
 },
 data: function () {
 return {
  open: false  //open indicates that the folder is closed
 }
 },
 computed: {
 isFolder: function () {
  return this.model.children &&
  this.model.children.length
 }
 }, //Calculate whether the object has child nodes and the number of child nodes is greater than 0 to determine whether it is a folder
 methods: {
 toggle: function () {
  if (this.isFolder) {
  this.open = !this.open
  }
 },    //How to control folder closure click trigger change open
 changeType: function () {
  if (!this.isFolder) {
  Vue.set(this.model, 'children', [])
  this.addChild()
  this.open = true
  }
 }, //Double click trigger to change file attributes into folders by adding child nodes to files
 addChild: function () {
  this.model.children.push({
  name: 'new stuff'
  })  //Click the + node in the folder to trigger adding a new file for the folder
 }   //Welcome to join the front-end full stack development and communication circle to blow water, chat, learn and exchange: 864305860
 }//For front-end personnel for 1-3 years
})//Help to break through technical bottleneck and improve thinking ability

So the design idea is to determine whether an object has child nodes to decide whether it is a folder or a file, and then to show the effect of the file tree by recursively reusing < item > components.
Finally, 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' }
   ]//Welcome to join the front-end full stack development exchange circle to learn and exchange: 864305860
  }//For front-end personnel for 1-3 years
  ]//Help to break through technical bottleneck and improve thinking ability
 }
 ]
}

You can continue to expand the function and display effect of the document tree according to this basic structure.
epilogue

Thank you for watching. If you have any shortcomings, please correct them.

Tags: Javascript Vue

Posted on Mon, 02 Dec 2019 17:41:04 -0800 by trev