vue with zTree

利用插件快速做一個樹形目錄

1.先寫好目錄結構，這個是個人習慣哈，不過覺得這樣看代碼比較清晰明瞭
src用於存放源代碼
我在其下面新建了3個文件夾
（1）common 用來存放公共的內容
（2）components 存放組件，因爲我想要做一個單頁面網站，所以還用它存放一些頁面模塊
（3）page 頁面，我的網站只有login和home兩個頁面，放在這裏

2. 修改mainjs，引入一些必要的插件，配置路由

（1）plugins裏面放的ztree就是我從ztree官網下載的樹形插件
（2）綠色框表示路由引用和配置
（3）藍色框是引用了jQuery和ztree插件，另外正確引入jQ還需要修改webpack.base.conf.js文件，下圖中紅框內容爲新增的

最後，需要在控制檯安裝jquery

路由配置情況如下圖所示

3. 頁面代碼



ztree.vue是引入樹形結構的核心文件，我貼代碼在下面

<template>
    <div id="areaTree">
        <div class="box-title">
            <a href="#">列表<i class="fa  fa-refresh" @click="freshArea"></i></a>
        </div>
        <div class="tree-box">
            <div class="zTreeDemoBackground left">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
      name: 'areaTree',
      components:{

      },
      data:function(){
        return{
            setting:{},
            zNodes:[
            { name:"父節點1 - 展開", open:true,
                children: [
                    { name:"父節點11 - 摺疊",
                        children: [
                            { name:"葉子節點111"},
                            { name:"葉子節點112"},
                            { name:"葉子節點113"},
                            { name:"葉子節點114"}
                        ]},
                    { name:"父節點12 - 摺疊",
                        children: [
                            { name:"葉子節點121"},
                            { name:"葉子節點122"},
                            { name:"葉子節點123"},
                            { name:"葉子節點124"}
                        ]},
                    { name:"父節點13 - 沒有子節點", isParent:true}
                ]},
            { name:"父節點2 - 摺疊",
                children: [
                    { name:"父節點21 - 展開", open:true,
                        children: [
                            { name:"葉子節點211"},
                            { name:"葉子節點212"},
                            { name:"葉子節點213"},
                            { name:"葉子節點214"}
                        ]},
                    { name:"父節點22 - 摺疊",
                        children: [
                            { name:"葉子節點221"},
                            { name:"葉子節點222"},
                            { name:"葉子節點223"},
                            { name:"葉子節點224"}
                        ]},
                    { name:"父節點23 - 摺疊",
                        children: [
                            { name:"葉子節點231"},
                            { name:"葉子節點232"},
                            { name:"葉子節點233"},
                            { name:"葉子節點234"}
                        ]}
                ]},
            { name:"父節點3 - 沒有子節點", isParent:true}

        ]
        }
      },
      methods:{
        freshArea:function(){
            $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
        }
      },
      mounted(){
        $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
      }
    }
</script>
<style>
    @import '../../../plugins/ztree/zTreeStyle.css';
    #areaTree{
        border:1px solid #e5e5e5;    margin-bottom: 2px;border-radius: 4px;overflow: hidden;
    }
    .box-title{
            border-radius: 3px 3px 0 0;background-color: #f5f5f5;
    }
    .box-title a{
            color: #2fa4e7;
             text-decoration: none;font-size:14px;    display: block;
    padding: 8px 15px;cursor: pointer;
    }
    .box-title .fa{
        float:right;line-height: 20px;
    }
</style>