上篇文章我提到了通信錄的開發,裏面的目錄使用了vue的遞歸組件實現的樹形目錄,這篇文章就來說講如何實現樹形目錄吧!javascript
首先實現效果以下,以爲菜單仍是比較nice的是吧:前端
這邊數據調用的是數據庫的數據的,須要數據庫進行數據的構造,這裏涉及到java的構造多叉樹的知識,後續我會另外寫一篇文章詳細講解,這裏講下前端。vue
數據能夠先構造json使用,這裏用到的格式大概以下,以childList來嵌套子菜單:java
{ 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=[] } ]} }
按照思路,咱們是要ul裏面套li,li裏面套ul,這樣無限套用,因此在子組件裏面這麼寫:數據庫
<li> <div> <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> </div> <ul v-show="open" v-if='isFolder'> <tree-menu v-for='cel in model.childList' :model='cel'></tree-menu> </ul> </li>
在官方文檔裏面強調了name屬性,因此咱們在開始還要定義name,這邊的name用到的是上面的tree-menu:json
export default { name: 'treeMenu', props: ['model'], components: {} }
按照vue的思想,不操做Dom樹,咱們定義兩個變量,一個顯示隱藏子菜單(open),一個存不存子菜單修改圖標(isFolder)。less
data() { return { open: false, isFolder: true, } },
我是參照一篇文章編寫的,在這一步說的是「利用vue計算屬性動態改變isFolder的值,修改圖標,判斷存在不子級和子級長度」ui
computed: { isFolder() { return this.model.childTreeNode && this.model.childTreeNode.length } }
這裏就出現了個問題,會一直不停地報錯:this
找了好久的問題,結果我是這樣解決的,去掉computed的計算屬性,將其放到created裏面:spa
created(){ //將isFolder放在這裏判斷能夠識別出最底層菜單,而後改變圖標,放在computed的話會一直報錯並識別不出最底層菜單改變樣式 this.isFolder = this.model.childList && this.model.childList.length; }
顯示/隱藏事件
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>
子組件:
<template> <li> <div> <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> </div> <ul v-show="open" v-if='isFolder'> <tree-menu v-for='cel in model.childList' :model='cel'></tree-menu> </ul> </li> </template> <script type="text/javascript"> import {bus} from '../../bus.js' export default { name: 'treeMenu', props: ['model','instType'], components: {}, data() { return { open: false, isFolder: true, } }, computed: { }, methods: { toggle: function() { if(this.isFolder){ this.open = !this.open; } }, //經過總線將值傳給父組件 propInstCode:function (model) { //$emit觸發當前實例事件 bus.$emit('custTreeSay',this.model.id); }, propInstName:function (model) { bus.$emit('custTreeSayName',this.model.name); } }, created(){ //將isFolder放在這裏判斷能夠識別出最底層菜單,而後改變圖標,放在computed的話會一直報錯並識別不出最底層菜單改變樣式 this.isFolder = this.model.childList && this.model.childList.length; } } </script> <style lang="less" rel="stylesheet/less" scoped> ul { list-style: none; padding-left: 20px; } ul li{ list-style: none; } a{ color: #404040; //text-decoration: underline; } i.icon { display: inline-block; width: 15px; height: 15px; background-repeat: no-repeat; vertical-align: middle; } i{ opacity: 0.8; color: #f0ad4e; } .tree-menu li { line-height: 1.5; } </style>
子組件能夠直接使用,樣式也一塊兒貼出來了,可是在父組件中也有點樣式,就留給大家本身操做了,這個完整的代碼裏面還包括了上篇文章提到的組件傳值的部分。
個人icon用的是阿里的iconfont,你們也能夠百度搜一下