vuejs使用遞歸組件實現樹形目錄

上篇文章我提到了通信錄的開發，裏面的目錄使用了vue的遞歸組件實現的樹形目錄，這篇文章就來說講如何實現樹形目錄吧！

首先實現效果以下，以爲菜單仍是比較nice的是吧：

這邊數據調用的是數據庫的數據的，須要數據庫進行數據的構造，這裏涉及到java的構造多叉樹的知識，後續我會另外寫一篇文章詳細講解，這裏講下前端。

數據能夠先構造json使用，這裏用到的格式大概以下,以childList來嵌套子菜單：

{
    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：

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

按照vue的思想，不操做Dom樹，咱們定義兩個變量，一個顯示隱藏子菜單(open),一個存不存子菜單修改圖標(isFolder)。

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

我是參照一篇文章編寫的，在這一步說的是「利用vue計算屬性動態改變isFolder的值，修改圖標，判斷存在不子級和子級長度」

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

這裏就出現了個問題，會一直不停地報錯：

找了好久的問題，結果我是這樣解決的，去掉computed的計算屬性，將其放到created裏面：

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，你們也能夠百度搜一下