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>