el-menu多级动态菜单渲染

琴师指战藏剑七杀

操纵el-menu时常常会碰到静态衬着操纵场景

装置战援用element久没有赘道，对其操纵办法没有是很熟习的小同伴能够来民网根据指引完成操纵
先简朴叙说一下衬着思绪：
起首我们要明白要衬着一个多级菜单的历程实践上便是对后端给我们的多层数据格局停止轮回遍历的一个历程，只是正在遍历的过程当中，需求对能否submit-menu安好凡是el-menu-item停止判定。
那里操纵的是自界说组件

创立MenuTree组件

1. src/components/MenuTree.vue
2. // 以下是组件内乱容
3. <div>
4.     <template v-for="menu in menuList">
5.       <!-- 假如当前有子菜单，则显现 el-submenu ，正在el-subment 里挪用 递回组件 -->
6.       <el-submenu
7.         v-if="menu.children && menu.children.length > 0"
8.         :index="menu.path"
9.         :key="menu.id"
10.       >
11.         <template slot="title">
12.           <i :class="menu.icon"></i>
13.           {{ menu.serverName }}
14.         </template>
15.         <!-- 挪用本身  此处是重面-->
17.         <MenuTree :menuList="menu.children"></MenuTree>
18.       </el-submenu>
19.       <!-- 假如出有子菜单，则显现当前内乱容 -->
20.       <el-menu-item v-else :index="menu.path" :key="menu.id">
21.         <i :class="menu.icon"></i>
22.         {{ menu.serverName }}
23.       </el-menu-item>
24.     </template>
25.   </div>

复造代码

留意项

1.那里的MenuTree 是vue的递回组件，实践上便是本人挪用本人那里组件中挪用本人的组件名字是name属性。
2.一面要正在递回组件中减上判定前提，不然能够会形成爆栈。
3.那里的属性名字请按照本人后端通报的数据字段名字改动。
真例代码

1. export default {
2.   name: "MenuTree", // 那里便是上边递回组件中利用的组件名字
3.   props: {
4.     menuList: {  // 正在那里增长了引进校验，便利毛病解除
5.       type: Array,
6.       required: false,
7.     },
8.   },
9.   mounted() {},
10. };

复造代码

以上便是我对多级菜单的衬着历程了。

免责声明：假如进犯了您的权益，请联络站少，我们会实时删除侵权内乱容，感谢协作！