_javascript Techniques of recursive components in vue.js learning

Recursive components

A component can recursively call itself within its template, only if it has the name option. At the official website, the key definition component must have the name attribute. According to this idea, let's get started.

Achieve the final effect diagram:

　　　　

The analog data format is as follows :

var data = [{"id": "1", "data": {"MenuName": "Project Management", "Menucode": "",},
          "Childtreenode": [{"Data": {"MenuName": "Project", "Menucode": "Busproject",  }, "Childtreenode": []}, {"Data": {"MenuName": "My Task", "Menucode": 
            "Busproject",}, "Childtreenode": []}, {"Data": {"MenuName": "Staff Weekly", 
        "Menucode": "Busproject",}, "Childtreenode": []}]}, {"id": "2",
      "Data": {"menuName": "Statistics", "Menucode": "Busclock",}, "Childtreenode": []
        }, {"id": "3", "data": {"MenuName": "Personnel Management", "Menucode": "",}, "Childtreenode": []}, {"id": "4", "data": {"MenuName": "Basic Management", "Menucode": " ",}," CHildtreenode ": []}] 

The HTML we thought in accordance with the UL inside sets Li, infinite ul sets Li, the title uses the DIV element parcel,

<li>
  <div @click = ' Toggle ' >
     <i v-if= ' isfolder ' class= ' fa ': class= ' [open? '] Fa-folder-open ': ' Fa-folder '] "></i>
<!--isfolder to determine if there is a child change icon--> <i v-if= '!isfolder '
     class= "FA Fa-file-text" ></i> {model.data.menuName}}
   </div>
   <ul v-show= "open" v-if= ' Isfolder ' >
     <items v-for= ' cel in Model.childtreenode ': model= ' cel ' ></items>
   </ul>
 </li>　　

The recursive component written in the official document emphasizes the use of the Name property

Export Default {
  name: ' Items ',
  props: [' model '],
  components: {},
}

According to Vue's mind, without manipulating the DOM tree, we define two variables, one to display the Hidden submenu (open), and one to save the submenu to modify the icon (Isfolder).

Data () {return
    {
       open:false,
       isfolder:true
    }
}}

Using Vue to dynamically change the value of Isfolder, modify the icon to determine the existence of the child and child length

Computed: {
  isfolder () {return
    this.model.childTreeNode && this.model.childTreeNode.length
  }
}    

Show hidden Events

Methods: {
toggle:function () {
   if (this.isfolder) {
     This.open =!this.open
   }
}}

Written here we have finished a tree menu as follows, the final style is left to everyone to achieve the implementation of my code for your reference.

<template> <li> <div @click = ' Toggle ' > <i v-if= ' isfolder ' class= ' fa ': class= ' [open? ']  Fa-folder-open ': ' Fa-folder '] ></i> <!--isfolder to determine if there is a child change icon--> <i v-if= '!isfolder ' class= ' FA Fa-file-text ' ></i> {model.data.menuName}} </div> <ul v-show= ' open ' v-if= ' Isfolder ' > & 
Lt;items v-for= ' cel in Model.childtreenode ': model= ' cel ' ></items> </ul> </li> </template>
    <script type= "Text/javascript" > Export Default {name: ' Items ', props: [' model '], components: {}, Data () {return {open:false, isfolder:true}}, computed: {isfolder:functi
      On () {return this.model.childTreeNode && This.model.childTreeNode.length}}, methods: { Toggle:function () {if (this.isfolder) {this.open =!this.open}},} &LT;/SC Ript>

The company started with the use of Easyui to do the management system, I took over after using Vue complete imitation of some easyui things, the following is based on a tree-shaped menu on the basis of a tree-shaped table, the following picture is the complete picture

Summarize

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring certain help, if you have questions you can message exchange