Heim > Web-Frontend > js-Tutorial > Hauptteil

Vuejs verwendet rekursive Komponenten, um Baumverzeichnisse zu implementieren

小云云
Freigeben: 2018-01-27 14:30:08
Original
2817 Leute haben es durchsucht

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=[]
    }
  ]}
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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: &#39;treeMenu&#39;,
  props: [&#39;model&#39;],
  components: {}
}
Nach dem Login kopieren

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,
   }
 },
Nach dem Login kopieren

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


computed: {
  isFolder() {
    return this.model.childTreeNode && this.model.childTreeNode.length
  }
}
Nach dem Login kopieren

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;
  }
Nach dem Login kopieren

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;
    }
   },
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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.




Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!