vue中使⽤element-ui导航菜单组件循环实现⼀级⼆级组件源码分享
导语：
之前使⽤react框架循环实现⼀级⼆级菜单使⽤的是递归函数，在vue中⽅法内写h5代码效果不太理想，所以经过研究实现了下⾯的代码，希望可以给各位⼀个灵感吧，源码奉上。
<template>
<div class="sidebar">
<el-menu
class="sidebar-el-menu"
:default-active="onRoutes"
background-color="#324157"
text-color="#bfcbd9"
active-text-color="#20a0ff"
vue element admin// 每次仅可展开⼀项⼆级菜单
unique-opened
// router开启路由模式，菜单的index会渲染为路由链接，实现点击对应菜单跳转到对应路由页⾯
router
>
// 循环items菜单数据，这个菜单数据结构可以写到js⽂件中然后导⼊进来
<template v-for="item in items">
// v-if="item.subs" 判断这⼀项数据是否有⼦项菜单
<template v-if="item.subs">
<el-submenu :index="item.index":key="item.index">
<template slot="title">
<i :class="item.icon"></i>
<span slot="title">{{ item.title }}</span>
</template>
<template v-for="subItem in item.subs">
<el-submenu
v-if="subItem.subs"
:index="subItem.index"
:key="subItem.index"
>
<template slot="title">{{ subItem.title }}</template>
<el-menu-item
v-for="(threeItem,i) in subItem.subs"
:key="i"
:index="threeItem.index"
>{{ threeItem.title }}</el-menu-item>
</el-submenu>
<el-menu-item
v-else
:index="subItem.index"
:key="subItem.index"
>{{ subItem.title }}</el-menu-item>
</template>
</el-submenu>
</template>
// 若不是多级菜单就会⾛这⾥⽣成⼀级菜单
<template v-else>
<el-menu-item :index="item.index":key="item.index">
<i :class="item.icon"></i>
<span slot="title">{{ item.title }}</span>
</el-menu-item>
</template>
</template>
</el-menu>
</div>
</template>
通过上⾯的写法实现了类似于递归的效果，欢迎各位讨论交流，若有不⾜欢迎指出

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