快捷導(dǎo)航

vue.js學(xué)習(xí)之遞歸組件

更新時(shí)間：2016年12月13日 10:32:41 作者：CURRY_zhao

最近學(xué)習(xí)vue.js有一段時(shí)間了，使用vue做了一套后臺(tái)管理系統(tǒng)，其中使用最多就是遞歸組件，也因?yàn)樽约簩?duì)官方文檔的不熟悉使得自己踩了不少坑，所以今天寫出來和大家一起分享。有需要的朋友們可以參考借鑒，下面來一起看看吧。

遞歸組件

組件在它的模板內(nèi)可以遞歸地調(diào)用自己，只有當(dāng)它有 name 選項(xiàng)時(shí)才可以。在官網(wǎng)這句話就是關(guān)鍵定義組件是一定要有name屬性。按照這個(gè)思路我們開動(dòng)吧。

實(shí)現(xiàn)最終效果圖：

模擬數(shù)據(jù)格式如下：

var data = [{
        "id": "1",
        "data": {
          "menuName": "項(xiàng)目管理",
          "menuCode": "",
        },
        "childTreeNode": [{
          "data": {
            "menuName": "項(xiàng)目",
            "menuCode": "BusProject",
          },
          "childTreeNode": []
        }, {
          "data": {
            "menuName": "我的任務(wù)",
            "menuCode": "BusProject",
          },
          "childTreeNode": []
        }, {
          "data": {
            "menuName": "人員周報(bào)",
            "menuCode": "BusProject",
          },
          "childTreeNode": []
        }]
      }, {
        "id": "2",
        "data": {
          "menuName": "數(shù)據(jù)統(tǒng)計(jì)",
          "menuCode": "BusClock",
        },
        "childTreeNode": []
      }, {
        "id": "3",
        "data": {
          "menuName": "人事管理",
          "menuCode": "",
        },
        "childTreeNode": []
      }, {
        "id": "4",
        "data": {
          "menuName": "基礎(chǔ)管理",
          "menuCode": "",
        },
        "childTreeNode": []
      }]

html我們思路按照ul里面套li，無限ul套li，標(biāo)題用div元素包裹，

<li>
  <div @click='toggle'>
　　
     <i v-if='isFolder' class="fa " :class="[open?'fa-folder-open':'fa-folder']"></i>
　　　　　<!--isFolder判斷是否存在子級(jí)改變圖標(biāo)-->
     <i v-if='!isFolder' class="fa fa-file-text"></i> {{model.data.menuName}}
   </div>
   <ul v-show="open" v-if='isFolder'>
     <items v-for='cel in model.childTreeNode' :model='cel'></items>
   </ul>
 </li>

官方文檔里面寫的遞歸組件強(qiáng)調(diào)了使用name屬性

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

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

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

利用vue計(jì)算屬性動(dòng)態(tài)改變isFolder的值，修改圖標(biāo)，判斷存在不子級(jí)和子級(jí)長度

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

顯示隱藏事件

methods: {
　　toggle: function() {
   if(this.isFolder) {
     this.open = !this.open
   }
　　}
}

寫到這里我們已經(jīng)做完一個(gè)樹形菜單了如下，最終樣式就留給大家自己去實(shí)現(xiàn)了我在貼出完整代碼供大家參考。

<template>
  <li>
    <div @click='toggle'>
      <i v-if='isFolder' class="fa " :class="[open?'fa-folder-open':'fa-folder']"></i>
      <!--isFolder判斷是否存在子級(jí)改變圖標(biāo)-->
      <i v-if='!isFolder' class="fa fa-file-text"></i> {{model.data.menuName}}
    </div>
    <ul v-show="open" v-if='isFolder'>
      <items v-for='cel in model.childTreeNode' :model='cel'></items>
    </ul>
  </li>
</template>
<script type="text/javascript">
  export default {
    name: 'items',
    props: ['model'],
    components: {},
    data() {
      return {
        open: false,
        isFolder: true
      }
    },
    computed: {
      isFolder: function() {
        return this.model.childTreeNode && this.model.childTreeNode.length
      }
    },
    methods: {
      toggle: function() {
        if(this.isFolder) {
          this.open = !this.open
        }
      },
    }
  }
</script>

公司最開始是使用easyui做的管理系統(tǒng)，我接手后用vue完整模仿了一些easyui的東西，下面就是在樹形菜單基礎(chǔ)上模仿出了樹形表格，下圖為完整圖