通过函数式组件,去实现一个不断递归的层级的需求;
这里以导航菜单为例,引用路由routes的数据,现实一个动态菜单栏
每一个子集的数据,都是通过动态渲染的,可以通过路由去扩展层级的变化;
此处不贴代码,详情到github仓库:https://github.com/justhui/dynamic-nav-menu(欢迎star,谢谢~~~)
在此简单阐述实现的思路已经实现过程中的问题:
1.实现思路
- 以routes这个数组的数据,进行数据处理;
- 对html结构进行数据循环,循环中通过v-if,v-else分别处理有子集和无子集的两种情况,无子集就直接显示数据;有子集则通过一个函数式组件进行递归;
此处为element-ui中 导航栏的部分, "sub-menu"为函数式组件,用于用组件的情况下进行递归;
<el-menu
default-active="/dashboard/analysis"
:collapse="isCollapse"
:collapse-transition="false"
unique-opened
router
>
<temp