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

在上一篇文章中，我提到了通讯录的发展。其中的目录使用vue递归组件实现的树形目录。本文将讲述如何实现树形目录。

首先，效果如下。我觉得菜单还是挺不错的，对吧？

这里，数据调用数据库的数据，这需要数据库来构造数据。这涉及到在java中构建多分支树的知识。稍后我会再写一篇文章详细解释。在这里，我将谈谈前端。

数据可以通过首先构造json来使用。这里使用的格式大致如下，childList用于嵌套子菜单：

{id: yh，名称：bank，PID: 0，childlist: [{id3360yh * * * * *，名称：中国开发银行，pid3360yh，childlist 3360 [{id3360yh * * * * 3，名称：中国开发银行。Pid:YH * * * * *，ChildList 3360 []}，{ID=YH * * * * * 1，名称=国家开发银行广东省分行，pid=YH*****，ChildList=[]}，{ID=YH * * * * *。Childlist=[]} ]}}按照思路，我们要把li设置在ul里面，把ul设置在Li里面，这样可以无限应用，所以写在子组件里面：

Li div I @ click=' toggle ' v-if=' IsFolder ' class=' mui-icon icon font ' : class='[open？icon-wenjia ' : ' icon-wenjia guanbi ']'/I！-isfold判断是否有子变化图标-I @ click=' toggle ' class=' mui-icon图标字体图标-文健' style=' color 3360 # 00 ccff ' v-else/I！-这里使用的方法是向父组件传递一个值。有关详细信息，请参见上一篇文章-span @ click=' proins code(model)；propInstName(model)' { { model . Name } }/span/div Ul v-show=' open ' v-if=' isFolder ' tree-menu v-for=' cel in model . child list ' : model=' cel '/tree-menu/Ul/Li强调官方文档中的name属性，因此我们需要在开头定义名称，这里的名称使用上面的tree-menu:

导出默认{name:' tree menu '，prop s 3360[' model ']，components 3360 } }按照vue的思路，Dom树是不操作的，我们定义了两个变量，一个是显示隐藏子菜单(打开)，一个是保存子菜单修改图标(isFolder)。

Data () {return {open: false，isFolder: true，}}我是参考一篇文章写的。这一步我说：“使用vue计算属性动态改变isfolder的值，修改图标，判断有没有孩子。”

computed : { is fold(){返回此。model.childtreenode这个。model.childtreenode.length}}这里有一个问题，它将继续报告错误：

我已经寻找这个问题很久了。结果我就这样解决了。我删除了computed的计算属性，并将其放入created:

Created(){ //把isFolder放在这里判断底层菜单可以识别，然后更改图标。如果将它放在computed中，它将总是报告错误，并且无法识别底层菜单更改样式。is fold=这个。model . child list this . model . child list . length；}显示/隐藏事件

methods : { toggle : function(){ if(this . Isfold){ this . open=！打开这个。}}，}这里构造了树目录的组件，只需在对应的父组件中调用即可，完整代码如下：

父组件中的引用

Ul class=' tree _ container' v-for='列表中的项目' my-menu-tree : model=' item ' : inst type=' this。inst type/my-menu-tree/ul子组件：

模板Li div I @ click=' toggle ' v-if=' IsFolder ' class=' mui-icon icon font ' : class='[open？图标-文佳' : '图标-文佳观壁']'/我！-是一个文件夹判断是否存在子级改变图标-我@ click=' toggle ' class=' mui-icon图标字体图标-文健style=' color : # 00 ccff ' v-else/I span @ click=' propInstCode(型号);propInstName(model)' { { model。name } }/span/div ul v-show=' open ' v-if=' IsFolder ' tree-menu v-for=' model。child list ' : model=' cel '/tree-menu/ul/Li/template脚本类型=' text/JavaScript ' import { bus } from '././公交车。js ' export default { name : ' tree menu '，props: ['model '，' instType']，components: { }，data() { return { open: false，isFolder: true，} }，computed: { }，methods : { toggle : function(){ if(this。I folder){这个。open=！打开这个。} }, //通过总线将值传给父组件propinstcode :函数(模型){//$ emit触发当前实例事件公共汽车$ emit(' custresay '，这个。模特。id)；}，propinnstname :函数(模型){ bus .$ emit(' custreasyname '，这。模特。姓名)；} },已创建(){ //将isFolder放在这里判断可以识别出最底层菜单，然后改变图标，放在计算的话会一直报错并识别不出最底层菜单改变样式这个。is fold=this。模特。孩子列出这个。模特。儿童名单。长度；} }/scriptstyle lang='less' rel='样式表/less '作用域ul {列表式：无；左填充left : 20px } ul Li { list-style : none；} a { color: # 404040//text-修饰：下划线；} I .图标{显示：内嵌块；宽度： 15px高度： 15px背景-重复：不重复；垂直对齐： 中间；} I { opa city 3360 0.8 color : # f0ad 4e }。树形菜单李{行高： 1.5；}/样式子组件可以直接使用，样式也一起贴出来了，但是在父组件中也有点样式，就留给你们自己操作了，这个完整的代码里面还包括了上篇文章提到的组件传值的部分。

我的图标用的是阿里的图标字体，大家也可以百度搜一下

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