vuejs使⽤递归组件实现树形⽬录的⽅法
上篇⽂章我提到了通讯录的开发，⾥⾯的⽬录使⽤了vue的递归组件实现的树形⽬录，这篇⽂章就来讲讲如何实现树形⽬录吧！
⾸先实现效果如下，觉得菜单还是⽐较nice的是吧：
这边数据调⽤的是数据库的数据的，需要数据库进⾏数据的构造，这⾥涉及到java的构造多叉树的知识，后续我会另外写⼀篇⽂章详细讲解，这⾥讲下前端。
数据可以先构造json使⽤，这⾥⽤到的格式⼤概如下，以childList来嵌套⼦菜单：
{
id：YH,
name：银⾏,
pid：0,mui框架常用组件
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" 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() {
del.childTreeNode && del.childTreeNode.length
}
}
这⾥就出现了个问题，会⼀直不停地报错：
了很久的问题，结果我是这样解决的，去掉computed的计算属性，将其放到created⾥⾯：
created(){
//将isFolder放在这⾥判断可以识别出最底层菜单，然后改变图标，放在computed的话会⼀直报错并识别不出最底层菜单改变样式
this.isFolder = del.childList && del.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" 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',del.id);
},
propInstName:function (model) {
bus.$emit('custTreeSayName',del.name);
}
},
created(){
//将isFolder放在这⾥判断可以识别出最底层菜单，然后改变图标，放在computed的话会⼀直报错并识别不出最底层菜单改变样式  this.isFolder = del.childList && del.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，⼤家也可以百度搜⼀下
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。