Vuejs verwendet rekursive Komponenten, um Baumverzeichnisse zu implementieren

In diesem Artikel wird hauptsächlich die Methode zur Verwendung rekursiver Komponenten zum Implementieren von Baumverzeichnissen in VueJS vorgestellt. Jetzt werde ich sie mit Ihnen teilen und Ihnen hoffentlich helfen.

Zuerst einmal finde ich das Menü ganz nett, oder? Die Struktur von Java erfordert das Wissen über die Konstruktion mehrerer Bäume. Ich werde später einen weiteren Artikel schreiben . Hier werde ich über das Frontend sprechen.

Die Daten können zunächst als JSON erstellt werden. Das hier verwendete Format ist ungefähr wie folgt, wobei childList zum Verschachteln des Untermenüs verwendet wird:

Entsprechend Zur Idee: Wir wollen li in ul und ul in li, damit es unendlich angewendet werden kann, also schreiben wir dies in die Unterkomponente:

{
  id：YH, 
  name：银行, 
  pid：0, 
  childList：[{
    id:YH******, 
    name:国家开发银行, 
    pid:YH, 
    childList:[{
      id:YH*****3, 
      name:国家开发银行香港分行, 
      pid:YH******, 
      childList:[]
    }, 
    {
      id=YH*****1, 
      name=国家开发银行广东省分行, 
      pid=YH******, 
      childList=[]
    }, {
      id=YH*****2, 
      name=国家开发银行深圳分行, 
      pid=YH******, 
      childList=[]
    }
  ]}
}

The Der Name wird im offiziellen Dokumentattribut hervorgehoben, daher müssen wir den Namen am Anfang definieren. Der Name verwendet hier das Baummenü oben:

 <li>
  <p>
   <i @click=&#39;toggle&#39; v-if=&#39;isFolder&#39; class="mui-icon iconfont" :class="[open?&#39;icon-wenjianjia&#39;:&#39;icon-wenjianjiaguanbi&#39;]"></i>
   <!--isFolder判断是否存在子级改变图标-->
   <i @click=&#39;toggle&#39; class="mui-icon iconfont icon-wenjian" style="color: #00ccff" v-else></i>
   <!--这里用到的方法是给父组件传值，具体可看上一篇文章-->
   <span @click="propInstCode(model);propInstName(model)">
    {{model.name}}
   </span>
  </p>
  <ul v-show="open" v-if=&#39;isFolder&#39;>
   <tree-menu v-for=&#39;cel in model.childList&#39; :model=&#39;cel&#39;></tree-menu>
  </ul>
 </li>

Gemäß dem Idee von Vue, keine Operation. Im Dom-Baum definieren wir zwei Variablen, eine zum Ein- und Ausblenden des Untermenüs (Öffnen) und eine zum Ändern des Symbols zum Speichern des Untermenüs (isFolder).

export default {
  name: 'treeMenu',
  props: ['model'],
  components: {}
}

Ich habe es auf der Grundlage eines Artikels geschrieben. Was ich in diesem Schritt gesagt habe, ist: „Verwenden Sie von Vue berechnete Eigenschaften, um den Wert von isFolder dynamisch zu ändern, ändern Sie das Symbol.“ und bestimmen Sie, ob es existiert oder nicht.

data() {
   return {
    open: false,
    isFolder: true,
   }
 },

Hier liegt ein Problem vor und der Fehler wird weiterhin gemeldet:

computed: {
  isFolder() {
    return this.model.childTreeNode && this.model.childTreeNode.length
  }
}

Ich habe lange nach einem Problem gesucht und es schließlich so gelöst: Entfernen Sie das berechnete Attribut von berechnet und fügen Sie es in erstellt ein:

Ereignisse anzeigen/ausblenden

created(){
   //将isFolder放在这里判断可以识别出最底层菜单，然后改变图标，放在computed的话会一直报错并识别不出最底层菜单改变样式
   this.isFolder = this.model.childList && this.model.childList.length;
  }

Die Komponente des Baumverzeichnisses wurde hier erstellt. Rufen Sie sie einfach in der entsprechenden übergeordneten Komponente auf . Der vollständige Code lautet wie folgt:

Referenz

methods: {
   toggle: function() {
    if(this.isFolder){
     this.open = !this.open;
    }
   },
}

Unterkomponente in der übergeordneten Komponente:

<ul class="tree_container" v-for="item in list">
  <my-menu-tree :model=&#39;item&#39; :instType=&#39;this.instType&#39;></my-menu-tree>
</ul>

Unterkomponente kann direkt verwendet werden, die Stile werden auch zusammen gepostet, aber es gibt auch einige Stile in der übergeordneten Komponente, die Sie selbst bedienen können. Dieser vollständige Code enthält auch die Der im vorherigen Artikel erwähnte Komponentenwertübertragungsteil.

Mein Symbol verwendet die Symbolschriftart von Alibaba. Sie können es auch auf Baidu durchsuchen.

Verwandte Empfehlungen:

Beispiel für ein Baumverzeichnis, implementiert durch jquery_jquery

Das obige ist der detaillierte Inhalt vonVuejs verwendet rekursive Komponenten, um Baumverzeichnisse zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!