vuejs使用递归组件实现树形目录的方法
更新时间：2017年09月30日 17:05:01 作者：我是帅帅的玉米
本篇文章主要介绍了vuejs使用递归组件实现树形目录的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
上篇文章我提到了通讯录的开发，里面的目录使用了vue的递归组件实现的树形目录，这篇文章就来讲讲如何实现树形目录吧！
首先实现效果如下，觉得菜单还是比较nice的是吧：
这边数据调用的是数据库的数据的，需要数据库进行数据的构造，这里涉及到java的构造多叉树的知识，后续我会另外写一篇文章详细讲解，这里讲下前端。
数据可以先构造json使用，这里用到的格式大概如下,以childList来嵌套子菜单：
{
id：YH,
name：银行,
pid：0,
childList：[{
id:YH******,
name:国家开发银行,
pid:YH,
childList:[{
id:YH*****3,
name:国家开发银行香港分行,
pid:YH******,
childList:[]
},
{
id=YH*****1,
name=国家开发银行广东省分行,
pid=YH******,
childList=[]
}, {
id=YH*****2,
name=国家开发银行深圳分行,
pid=YH******,
childList=[]
}
]}
}
按照思路，我们是要ul里面套li，li里面套ul，这样无限套用，所以在子组件里面这么写：
<li>
<div>
<i @click='toggle' v-if='isFolder' class="mui-icon iconfont" :class="[open?'icon-wenjianjia':'icon-wenjianjiaguanbi']"></i>
<!--isFolder判断是否存在子级改变图标-->
<i @click='toggle' class="mui-icon iconfont icon-wenjian" style="color: #00ccff" v-else></i>
<!--这里用到的方法是给父组件传值，具体可看上一篇文章-->
<span @click="propInstCode(model);propInstName(model)">
{{model.name}}
</span>
</div>
<ul v-show="open" v-if='isFolder'>
<tree-menu v-for='cel in model.childList' :model='cel'></tree-menu>
</ul>
</li>
在官方文档里面强调了name属性，所以我们在开始还要定义name，这边的name用到的是上面的tree-menu：
export default {
name: 'treeMenu',
props: ['model'],
components: {}
}
按照vue的思想，不操作Dom树，我们定义两个变量，一个显示隐藏子菜单(open),一个存不存子菜单修改图标(isFolder)。
data() {
return {
open: false,
isFolder: true,
}
},
我是参照一篇文章编写的，在这一步说的是“利用vue计算属性动态改变isFolder的值，修改图标，判断存在不子级和子级长度”
computed: {
isFolder() {
return this.model.childTreeNode && this.model.childTreeNode.length
}
}
这里就出现了个问题，会一直不停地报错：
找了很久的问题，结果我是这样解决的，去掉computed的计算属性，将其放到created里面：
created(){
//将isFolder放在这里判断可以识别出最底层菜单，然后改变图标，放在computed的话会一直报错并识别不出最底层菜单改变样式
this.isFolder = this.model.childList && this.model.childList.length;
}
显示/隐藏事件
methods: {
toggle: function() {
if(this.isFolder){
this.open = !this.open;
}
},
}
到这里就构造好树形目录的组件了，只要在相应的父组件里面调用就行了，完整代码如下：
父组件中引用
<ul class="tree_container" v-for="item in list"> <my-menu-tree :model='item' :instType='this.instType'></my-menu-tree> </ul>
子组件：
<template>
<li>
<div>
<i @click='toggle' v-if='isFolder' class="mui-icon iconfont" :class="[open?'icon-wenjianjia':'icon-wenjianjiaguanbi']"></i>
<!--isFolder判断是否存在子级改变图标-->
<i @click='toggle' class="mui-icon iconfont icon-wenjian" style="color: #00ccff" v-else></i>
<span @click="propInstCode(model);propInstName(model)">
{{model.name}}
</span>
</div>
<ul v-show="open" v-if='isFolder'>
<tree-menu v-for='cel in model.childList' :model='cel'></tree-menu>
</ul>
</li>
</template>
<script type="text/javascript">
import {bus} from '../../bus.js'
export default {
name: 'treeMenu',
props: ['model','instType'],
components: {},
data() {
return {
open: false,
isFolder: true,
}
},
computed: {
},
methods: {
toggle: function() {
if(this.isFolder){
this.open = !this.open;
}
},
//通过总线将值传给父组件
propInstCode:function (model) {
//$emit触发当前实例事件
bus.$emit('custTreeSay',this.model.id);
},
propInstName:function (model) {
bus.$emit('custTreeSayName',this.model.name);
}
},
created(){
//将isFolder放在这里判断可以识别出最底层菜单，然后改变图标，放在computed的话会一直报错并识别不出最底层菜单改变样式
this.isFolder = this.model.childList && this.model.childList.length;
}
}
</script>
<style lang="less" rel="stylesheet/less" scoped>
ul {
list-style: none;
padding-left: 20px;
}
ul li{
list-style: none;
}
a{
color: #404040;
//text-decoration: underline;
}
i.icon {
display: inline-block;
width: 15px;
height: 15px;
background-repeat: no-repeat;
vertical-align: middle;
}
i{
opacity: 0.8;
color: #f0ad4e;
}
.tree-menu li {
line-height: 1.5;
}
</style>
子组件可以直接使用，样式也一起贴出来了，但是在父组件中也有点样式，就留给你们自己操作了，这个完整的代码里面还包括了上篇文章提到的组件传值的部分。
我的icon用的是阿里的iconfont，大家也可以百度搜一下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了详解vue-cli之webpack3构建全面提速优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了vue实现公共方法抽离，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
下面小编就为大家分享一篇Vue 拦截器对token过期处理方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了vue-devtools安装使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
下面小编就为大家分享一篇iview table高度动态设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
provide和inject主要为高阶插件/组件库提供用例,并不推荐直接用于应用程序代码中,下面这篇文章主要给大家介绍了关于Vue中provide、inject详解以及使用的相关资料,需要的朋友可以参考下2022-11-11
前端开发中,随着业务的增多,出于效率的考虑,我们对于组件化开发的需求也越来越迫切。下面这篇文章主要给大家介绍了关于vue.js之UI组件开发的相关资料，文中介绍的非常详细，需要的朋友们下面来一起看看吧。2017-07-07
这篇文章介绍了Vue路由vue-router的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-01-01
这篇文章主要给大家介绍了关于Vue项目启动白屏问题的几种解决办法,Vue项目打包后出现白屏的可能原因有很多,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了Vue数据双向绑定原理实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
最新评论