Vue implementiert rekursiv benutzerdefinierte Baumkomponenten

In diesem Artikel wird der spezifische Code der rekursiven Implementierung einer benutzerdefinierten Baumkomponente durch Vue zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

1. In tree/index.vue:

<Vorlage>
  <div>
      <ul>
          <item :modell='Daten'></item>
      </ul>
  </div>
</Vorlage>
 
<Skript>
Element aus „./item“ importieren
Standard exportieren {
    Komponenten: {
        Artikel
    },
    Daten(){
        zurückkehren {
            Daten:{
                Titel:"Ebene 1",
                Kinder:[
                    {
                        Titel:"Ebene 1-1",
                        Kinder:[
                            {
                                Titel:"Level 3 1-1-1",
                                Kinder:[
                                    {
                                        Titel:"Level 4 1-1-1-1",
                                        Kinder:[
                                            {
                                                Titel: „Level 5 1-1-1-1-1“
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },{
                        Titel: „Level 1-2“,
                        Kinder:[
                            {
                                Titel: „Level 3 1-2-1“
                            }
                        ]
                    }
                ]
            }
        }
    }
}
</Skript>

2. item.vue-Komponente:

<Vorlage>
  <li>
      <div @click="umschalten">
          {{model.title}}
          <span v-if="isFolder">[{{öffnen?'-':'+'}}]</span>
      </div>
      <ul v-show="öffnen" v-if="isFolder">
          <item v-for="(Kind,Index) in Modell.Kinder" :Modell='Kind' :Schlüssel='Index'></item>
      </ul>
  </li>
</Vorlage>
 
<Skript>
Standard exportieren {
    Name: 'Artikel',
    Requisiten:{
        Modell:{
            Typ: Objekt,
            erforderlich: wahr
        }
    },
    Daten(){
        zurückkehren {
            offen:false
        }
    },
    berechnet:{
        istOrdner(){
           returniere dieses.Modell.Kinder && diese.Modell.Kinder.Länge>0
        }
    },
    Methoden:{
        umschalten(){
            wenn (dieser.istOrdner) dies.öffnen =!dieses.öffnen
        }
    }
}
</Skript>

3. Verwendung in beliebigen Komponenten:

<Vorlage>
  <div Klasse="Index">
      <Baum></Baum>
  </div>
</Vorlage>
 
<Skript>
    Baum importieren aus "@/components/tree"
    Komponenten: {
        Baum
    }
</Skript>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

So implementieren Sie die Baumkomponente von Vue
Verwenden Sie die Vant TreeSelect-Klassifizierungsauswahlkomponentenoperation in Vue
Vue verwendet das zTree-Plugin, um ein Beispiel für die Operation einer Baumkomponente zu kapseln
Vue rekursive Komponente + Vuex Entwicklungsbaumkomponente Tree - einfache Implementierung einer rekursiven Komponente
Der Vue-Komponentenbaum implementiert ein Baummenü
Der Vue2-Komponentenbaum implementiert ein Baummenü mit unbegrenzten Ebenen
Der Vue.js-Komponentenbaum realisiert eine mehrstufige Verknüpfung zwischen Provinzen und Städten
Der Vue.js-Komponentenbaum implementiert ein Baummenü mit unbegrenzten Ebenen

<<: Detaillierte Erläuterung verschiedener Möglichkeiten zum Abrufen der PID (TID, LWP) von Linux-Threads

>>: Detaillierte Erläuterung von drei Beziehungsbeispielen für MySQL-Fremdschlüssel