vue.js樹型結構實現

參考：http://www.cnblogs.com/ychl/p/6075106.html

雖然文章給出的方法可以實現樹結構，使用的圖標是boostrap提供的fa類別的圖標。參考文獻中的代碼：

父組件中引入items

  <items  :model='model' v-for='model in data'></items>

以下是items.vue的內容
<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>

但是如果使用的話，還需要做一些修改

1. 去掉li標籤

   <li style="list-style-type:none;">
        <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>

2. 爲了使得可以選中的子節點能夠返回父控件，增加交互性，需要可以讓子控件能夠傳遞給父控件數據，但是子控件是循環嵌套的，因此需要層層上傳，直到父控件。

採用：子控件像父控件傳送數據

<template>
    <li  style="list-style-type:none;">
        <div @click='toggle'>
            <i v-if='isFolder' class="fa text-yellow" :class="[open?'fa-folder-open':'fa-folder']" ></i>
            <!--isFolder判斷是否存在子級改變圖標-->
            <i v-if='!isFolder' class="fa fa-file-text text-blue" ></i> {{model.data.menuName}}
        </div>
        <ul v-show="open" v-if='isFolder'>
           <items v-for='cel in model.childTreeNode' :model='cel' @upup="change" :choose="choose"></items>
        </ul>
    </li>
</template>
<script type="text/javascript">
import $ from 'jquery';
var VueRouter = require('vue-router');
    
    export default {
        name: 'items',
        props: ['model'],
        components: {},
        data() {
            return {
                open: false,
                isFolder: true,
                choose:''
            }
        },
        computed: {
            isFolder: function() {
                return this.model.childTreeNode && this.model.childTreeNode.length
            }
        },
        methods: { 
        
         change(choose){
            this.choose=choose;
              this.$emit('upup',this.choose);
        },
            toggle: function() {
                this.choose=this.model.data.menuCode;
                this.$emit('upup',this.choose); 

                if(this.isFolder) {
                    this.open = !this.open
                }
                
                    
            },
        }
    }
</script>

父控件調用： 

template中：

  <items  :model='model' @upup="change" :choose="choose" v-for='model in data'></items>
                  {{choose}}

script中：

import items from "../../components/items.vue";
    
module.exports = {
components: {
      items
 },
data: function() {
    return {
      choose:''
 }
methods: {  
        change(choose){
            this.choose=choose;
 }
}

數據類型

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": []
            }]