vuejs使用递归组件实现树形目录的方法

2019-11-19 15:13:55

字体：大中小

来源：转载

供稿：网友

上篇文章我提到了通讯录的开发，里面的目录使用了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，大家也可以百度搜一下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：基于原生js运动方式关键点的总结(推荐)

下一篇：Easy UI动态树点击文字实现展开关闭功能