vue with zTree
利用插件快速做一个树形目录1.先写好目录结构,这个是个人习惯哈,不过觉得这样看代码比较清晰明了src用于存放源代码我在其下面新建了3个文件夹(1)common 用来存放公共的内容(2)components存放组件,因为我想要做一个单页面网站,所以还用它存放一些页面模块(3)page页面,我的网站只有login和home两个页面,放在这里2. 修改mainj
·
利用插件快速做一个树形目录
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>
更多推荐
已为社区贡献2条内容
所有评论(0)