vuejs使用递归组件实现树形目录的方法
发布时间：2020-12-17 02:46:42 所属栏目：百科 来源：网络整理
导读：上篇文章我提到了通讯录的开发，里面的目录使用了vue的递归组件实现的树形目录，这篇文章就来讲讲如何实现树形目录吧！ 首先实现效果如下，觉得菜单还是比较nice的是吧： 这边数据调用的是数据库的数据的，需要数据库进行数据的构造，这里涉及到java的构造多
|
上篇文章我提到了通讯录的开发，里面的目录使用了vue的递归组件实现的树形目录，这篇文章就来讲讲如何实现树形目录吧！ 首先实现效果如下，觉得菜单还是比较nice的是吧：
这边数据调用的是数据库的数据的，需要数据库进行数据的构造，这里涉及到java的构造多叉树的知识，后续我会另外写一篇文章详细讲解，这里讲下前端。 数据可以先构造json使用，这里用到的格式大概如下,以childList来嵌套子菜单： 按照思路，我们是要ul里面套li，li里面套ul，这样无限套用，所以在子组件里面这么写： 在官方文档里面强调了name属性，所以我们在开始还要定义name，这边的name用到的是上面的tree-menu： 按照vue的思想，不操作Dom树，我们定义两个变量，一个显示隐藏子菜单(open),一个存不存子菜单修改图标(isFolder)。 我是参照一篇文章编写的，在这一步说的是“利用vue计算属性动态改变isFolder的值，修改图标，判断存在不子级和子级长度” 这里就出现了个问题，会一直不停地报错：
找了很久的问题，结果我是这样解决的，去掉computed的计算属性，将其放到created里面： 显示/隐藏事件 到这里就构造好树形目录的组件了，只要在相应的父组件里面调用就行了，完整代码如下： 父组件中引用 子组件： 相关内容
|
