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=[] } ]} }
<li> <p> <i @click='toggle' v-if='isFolder' class="mui-icon iconfont" :class="[open?'icon-wenjianjia':'icon-wenjianjiaguanbi']"></i> <!--isFolder判断是否存在子级改变图标--> <i @click='toggle' 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='isFolder'> <tree-menu v-for='cel in model.childList' :model='cel'></tree-menu> </ul> </li>
export default { name: 'treeMenu', props: ['model'], components: {} }
data() { return { open: false, isFolder: true, } },
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; }
Referenz
methods: { toggle: function() { if(this.isFolder){ this.open = !this.open; } }, }
<ul class="tree_container" v-for="item in list"> <my-menu-tree :model='item' :instType='this.instType'></my-menu-tree> </ul>
Mein Symbol verwendet die Symbolschriftart von Alibaba. Sie können es auch auf Baidu durchsuchen.
{{model.name}}
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!