vuejs學習--遞歸組件(樹型表格分享)

時間 2019-11-12

標籤 vuejs 學習遞歸組件表格分享欄目應用數學简体版

原文原文鏈接

前言

　　學習vue有一段時間了，最近使用vue作了一套後臺管理系統，其中使用最多就是遞歸組件，也由於本身對官方文檔的不熟悉使得本身踩了很多坑，今天寫出來和你們一塊兒分享。javascript

遞歸組件

　　組件在它的模板內能夠遞歸地調用本身，只有當它有 name 選項時才能夠。在官網這句話就是關鍵定義組件是必定要有name屬性。按照這個思路咱們開動吧。html

　　實現最終效果圖：vue

　　模擬數據格式以下：java

var data = [{
                "id": "1",
                "data": {
                    "menuName": "項目管理",
                    "menuCode": "",
                },
                "childTreeNode": [{
                    "data": {
                        "menuName": "項目",
                        "menuCode": "BusProject",
                    },
                    "childTreeNode": []
                }, {
                    "data": {
                        "menuName": "個人任務",
                        "menuCode": "BusProject",
                    },
                    "childTreeNode": []
                }, {
                    "data": {
                        "menuName": "人員週報",
                        "menuCode": "BusProject",
                    },
                    "childTreeNode": []
                }]
            }, {
                "id": "2",
                "data": {
                    "menuName": "數據統計",
                    "menuCode": "BusClock",
                },
                "childTreeNode": []
            }, {
                "id": "3",
                "data": {
                    "menuName": "人事管理",
                    "menuCode": "",
                },
                "childTreeNode": []
            }, {
                "id": "4",
                "data": {
                    "menuName": "基礎管理",
                    "menuCode": "",
                },
                "childTreeNode": []
            }]

html咱們思路按照ul裏面套li，無限ul套li，標題用div元素包裹，git

<li>
    <div @click='toggle'>
　　
         <i v-if='isFolder' class="fa " :class="[open?'fa-folder-open':'fa-folder']"></i>
　　　　　<!--isFolder判斷是否存在子級改變圖標-->
         <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>

官方文檔裏面寫的遞歸組件強調了使用name屬性github

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

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

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

利用vue計算屬性動態改變isFolder的值，修改圖標，判斷存在不子級和子級長度this

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

顯示隱藏事件spa

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

寫到這裏咱們已經作完一個樹形菜單了以下，最終樣式就留給你們本身去實現了我在貼出完整代碼供你們參考。code

父組件中引入items


<template>
    <li>
        <div @click='toggle'>
            <i v-if='isFolder' class="fa " :class="[open?'fa-folder-open':'fa-folder']"></i>
            <!--isFolder判斷是否存在子級改變圖標-->
            <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>