实现不限层级的Element的NavMenu
做管理后台开发的时候，需要用到Element的NavMenu组件，于是乎，翻开文档，大致是这样实现的。
<el-menu>
<el-menu-item index="1">标题一</el-menu-item>
<el-submenu index="2">
<template slot="title">标题二</template>
<el-menu-item index="2-1">选项1</el-menu-item>
</el-submenu>
</el-menu>非常简单，But，实际开发中，就不是这么一回儿事儿了，我们的导航菜单，层级是不确定的。有可能是一层，有可能是两层，有可能是三层，崩溃不崩溃。按照这个中规中矩的写法，似乎要写到天荒地老了。
我们来梳理一下如何实现。
- 一层，使用elMenuItem，很好~
- 二层，使用elSubmenu嵌套elMenuItem，很好~
- 三层，使用elSubmenu嵌套elMenuItem嵌套elSubmenu，不太好了
- ...
是不是联想起来什么了，对，递归。
赶紧翻翻vue文档吧，果真，有一种叫做递归组件的东西，说白了，就是组件中再调用组件。（注意：递归组件一定要记得写好name属性）
所以，赶紧实现一下吧。
先来写一下需要递归的NavMenu组件
<!-- 递归菜单 -->
<el-menu default-active="0" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<nav-menu :navMenus="asideMenu"></nav-menu>
</el-menu>
<!-- 递归菜单结束 -->
然后写一下NavMenu组件
<template>
<div class="nav-menu">
<el-menu-item v-for="navMenu in noChildren" :index="navMenu.id" :key="navMenu.id">
<span slot="title" @click="clickMenu(navMenu)">{{navMenu.name}}</span>
</el-menu-item>
<el-submenu v-for="navMenu in hasChildren" :key="navMenu.id" :index="navMenu.id">
<template slot="title" @click="clickMenu(navMenu)">
<span>{{navMenu.name}}</span>
</template>
<nav-menu :navMenus="navMenu.children"></nav-menu>
</el-submenu>
</div>
</template> <script>
export default {
name: 'NavMenu',
props: {
navMenus: Array
},
computed: {
noChildren() {
return this.navMenus.filter(item => item.children.length === 0);
},
hasChildren() {
return this.navMenus.filter(item => item.children.length > 0);
}
},
data() {
return {};
},
methods: {
clickMenu(menu) {
this.$store.commit('SET_MENU', menu);
this.$router.push({
path: menu.link
});
}
}
};
</script>
后台返的数据结构：
1 {
2 "data":[
3 {
4 "parent":"0",
5 "from_store":"",
6 "lock_status":"0",
7 "open_type":"1",
8 "level":"1",
9 "link":"",
10 "icon_name":"qy-service_appointment",
11 "personalize":"0",
12 "jump_addr":"",
13 "icon_color":"#2aaa91",
14 "children":[
15
16 ],
17 "name":"流程",
18 "id":"1",
19 "package_version_code":"",
20 "showChildren":false
21 },
22 {
23 "parent":"0",
24 "from_store":"",
25 "lock_status":"0",
26 "open_type":"1",
27 "level":"1",
28 "link":"",
29 "icon_name":"qy-service_appointment",
30 "personalize":"0",
31 "jump_addr":"",
32 "icon_color":"#2aaa91",
33 "children":[
34
35 ],
36 "name":"Info",
37 "id":"2",
38 "package_version_code":"",
39 "showChildren":false
40 },
41 {
42 "parent":"0",
43 "from_store":"",
44 "app_type":"",
45 "lock_status":"0",
46 "open_type":"1",
47 "level":"1",
48 "link":"",
49 "description":"",
50 "icon_name":"qy-performance",
51 "personalize":"0",
52 "jump_addr":"",
53 "icon_color":"#54698d",
54 "children":[
55 {
56 "app_show":"1",
57 "parent":"3",
58 "from_store":"",
59 "app_type":"information",
60 "lock_status":"0",
61 "web_show":"1",
62 "open_type":"1",
63 "level":"2",
64 "link":"/app/!/information/yonghubiao",
65 "description":"",
66 "icon_name":"qy-lead",
67 "personalize":"0",
68 "jump_addr":"",
69 "icon_color":"#00cdc0",
70 "children":[
71
72 ],
73 "name":"用户表",
74 "id":"4",
75 "app_id":"yonghubiao",
76 "package_version_code":"",
77 "showChildren":false,
78 "order":"0"
79 },
80 {
81 "app_show":"1",
82 "parent":"3",
83 "from_store":"",
84 "app_type":"information",
85 "lock_status":"0",
86 "web_show":"1",
87 "open_type":"1",
88 "level":"2",
89 "link":"/app/!/information/pingjifufenjisuangui",
90 "description":"",
91 "icon_name":"qy-contract",
92 "personalize":"0",
93 "jump_addr":"",
94 "icon_color":"#fcb95b",
95 "children":[
96
97 ],
98 "name":"评级赋分计算规则",
99 "id":"22",
100 "app_id":"pingjifufenjisuangui",
101 "package_version_code":"",
102 "showChildren":false,
103 "order":"0"
104 },
105 {
106 "app_show":"1",
107 "parent":"3",
108 "from_store":"",
109 "app_type":"link",
110 "lock_status":"0",
111 "web_show":"1",
112 "open_type":"1",
113 "level":"2",
114 "link":"https://www.baidu.com",
115 "description":"",
116 "icon_name":"qy-case_comment",
117 "personalize":"0",
118 "jump_addr":"",
119 "icon_color":"#8199af",
120 "children":[
121
122 ],
123 "name":"baidu",
124 "id":"23",
125 "package_version_code":"",
126 "showChildren":false,
127 "order":"0"
128 },
129 {
130 "app_show":"1",
131 "parent":"3",
132 "from_store":"",
133 "app_type":"",
134 "lock_status":"0",
135 "web_show":"1",
136 "open_type":"1",
137 "level":"2",
138 "link":"",
139 "description":"",
140 "icon_name":"",
141 "personalize":"0",
142 "jump_addr":"",
143 "icon_color":"",
144 "children":[
145 {
146 "app_show":"1",
147 "parent":"6",
148 "from_store":"",
149 "app_type":"information",
150 "lock_status":"0",
151 "web_show":"1",
152 "open_type":"1",
153 "level":"3",
154 "link":"/app/!/information/jianchawenjuan",
155 "description":"",
156 "icon_name":"qy-question_best",
157 "personalize":"0",
158 "jump_addr":"",
159 "icon_color":"#e6717c",
160 "children":[
161
162 ],
163 "name":"检查问卷",
164 "id":"9",
165 "app_id":"jianchawenjuan",
166 "package_version_code":"",
167 "showChildren":false,
168 "order":"0"
169 },
170 {
171 "app_show":"1",
172 "parent":"6",
173 "from_store":"",
174 "app_type":"information",
175 "lock_status":"0",
176 "web_show":"1",
177 "open_type":"1",
178 "level":"3",
179 "link":"/app/!/information/wenjuanjianchaxiang",
180 "description":"",
181 "icon_name":"qy-contact_list",
182 "personalize":"0",
183 "jump_addr":"",
184 "icon_color":"#54698d",
185 "children":[
186
187 ],
188 "name":"问卷检查项",
189 "id":"10",
190 "app_id":"wenjuanjianchaxiang",
191 "package_version_code":"",
192 "showChildren":false,
193 "order":"1"
194 }
195 ],
196 "name":"检查问卷",
197 "id":"6",
198 "package_version_code":"",
199 "showChildren":false,
200 "order":"2"
201 }
202 ],
203 "name":"开发者应用",
204 "id":"3",
205 "package_version_code":"",
206 "showChildren":false,
207 "order":"1"
208 },
209 {
210 "parent":"0",
211 "from_store":"",
212 "app_type":"",
213 "lock_status":"0",
214 "open_type":"1",
215 "level":"1",
216 "link":"",
217 "description":"",
218 "icon_name":"qy-channel_program_leve",
219 "personalize":"0",
220 "jump_addr":"",
221 "icon_color":"#fcb95b",
222 "children":[
223 {
224 "app_show":"1",
225 "parent":"19",
226 "from_store":"",
227 "app_type":"information",
228 "lock_status":"0",
229 "web_show":"1",
230 "open_type":"1",
231 "level":"2",
232 "link":"/app/!/information/chuanbojibenxinxi",
233 "description":"",
234 "icon_name":"qy-custom93",
235 "personalize":"0",
236 "jump_addr":"",
237 "icon_color":"#54698d",
238 "children":[
239
240 ],
241 "name":"船舶基本信息",
242 "id":"14",
243 "app_id":"chuanbojibenxinxi",
244 "package_version_code":"",
245 "showChildren":false,
246 "order":"0"
247 },
248 {
249 "app_show":"1",
250 "parent":"19",
251 "from_store":"",
252 "app_type":"information",
253 "lock_status":"0",
254 "web_show":"1",
255 "open_type":"1",
256 "level":"2",
257 "link":"/app/!/information/qiyexinxi5",
258 "description":"",
259 "icon_name":"qy-channel_program_leve",
260 "personalize":"0",
261 "jump_addr":"",
262 "icon_color":"#ef6e64",
263 "children":[
264
265 ],
266 "name":"企业信息",
267 "id":"18",
268 "app_id":"qiyexinxi5",
269 "package_version_code":"",
270 "showChildren":false,
271 "order":"1"
272 }
273 ],
274 "name":"船舶信息管理",
275 "id":"19",
276 "package_version_code":"",
277 "showChildren":false,
278 "order":"11"
279 },
280 {
281 "parent":"0",
282 "from_store":"",
283 "app_type":"",
284 "lock_status":"0",
285 "open_type":"1",
286 "level":"1",
287 "link":"",
288 "description":"",
289 "icon_name":"qy-answer_private",
290 "personalize":"0",
291 "jump_addr":"",
292 "icon_color":"#fa975c",
293 "children":[
294 {
295 "app_show":"1",
296 "parent":"20",
297 "from_store":"",
298 "app_type":"information",
299 "lock_status":"0",
300 "web_show":"1",
301 "open_type":"1",
302 "level":"2",
303 "link":"/app/!/information/pingjifufenjilu",
304 "description":"",
305 "icon_name":"qy-souyisou",
306 "personalize":"0",
307 "jump_addr":"",
308 "icon_color":"#00cdc0",
309 "children":[
310
311 ],
312 "name":"评级赋分记录",
313 "id":"12",
314 "app_id":"pingjifufenjilu",
315 "package_version_code":"",
316 "showChildren":false,
317 "order":"0"
318 }
319 ],
320 "name":"评级赋分管理",
321 "id":"20",
322 "package_version_code":"",
323 "showChildren":false,
324 "order":"111"
325 },
326 {
327 "parent":"0",
328 "from_store":"",
329 "app_type":"",
330 "lock_status":"0",
331 "open_type":"1",
332 "level":"1",
333 "link":"",
334 "description":"",
335 "icon_name":"qy-custom43",
336 "personalize":"0",
337 "jump_addr":"",
338 "icon_color":"#a904ed",
339 "children":[
340 {
341 "app_show":"1",
342 "parent":"21",
343 "from_store":"",
344 "app_type":"information",
345 "lock_status":"0",
346 "web_show":"1",
347 "open_type":"1",
348 "level":"2",
349 "link":"/app/!/information/falvfaguixinxi",
350 "description":"",
351 "icon_name":"qy-environment_hub",
352 "personalize":"0",
353 "jump_addr":"",
354 "icon_color":"#8199af",
355 "children":[
356
357 ],
358 "name":"法律法规信息",
359 "id":"16",
360 "app_id":"falvfaguixinxi",
361 "package_version_code":"",
362 "showChildren":false,
363 "order":"0"
364 },
365 {
366 "app_show":"1",
367 "parent":"21",
368 "from_store":"",
369 "app_type":"information",
370 "lock_status":"0",
371 "web_show":"1",
372 "open_type":"1",
373 "level":"2",
374 "link":"/app/!/information/zhuanjiakuxinxi",
375 "description":"",
376 "icon_name":"qy-contact_list",
377 "personalize":"0",
378 "jump_addr":"",
379 "icon_color":"#fe8f60",
380 "children":[
381
382 ],
383 "name":"专家库信息",
384 "id":"17",
385 "app_id":"zhuanjiakuxinxi",
386 "package_version_code":"",
387 "showChildren":false,
388 "order":"1"
389 }
390 ],
391 "name":"系统资料库",
392 "id":"21",
393 "package_version_code":"",
394 "showChildren":false,
395 "order":"1111"
396 }
397 ],
398 "message":"获取数据成功",
399 "status":200
400 }
最终效果如下：
总结：当遇到多叉树或无限层级问题时，vue的递归组件是个比较好的解决方案，可以较大的节约开发时间降低开发成本。
参考网站：
https://segmentfault.com/a/1190000020638864?utm_source=tag-newest
https://blog.csdn.net/goodsave/article/details/78879842
https://www.cnblogs.com/fei-H/p/11359028.html
实现不限层级的Element的NavMenu的更多相关文章
- Vue+Element实现网页版个人简历系统
这篇文章介绍一个使用Vue+Element实现的个人简历系统,主要用到的技术有:vue.element.css3.css定位. 作者在window10进行开发,目前只在chrome上进行过测试,没有大 ...
- 【Mock平台】测试开发实战01-开篇PRD和需求详细
微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 平台背景 从业务特性上,不少测试的服务很多是依赖第三方的接口的,比如其中的支付场景,就需要很多状态的返回进行验证,但大部分服务提供商没有很 ...
- 提高可测性-Mock平台设计和整体规划
微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 平台背景 从业务特性上,不少测试的服务很多是依赖第三方的接口的,比如其中的支付场景,就需要很多状态的返回进行验证,但大部分服务提供商没有很 ...
- ExtJS扩展：扩展grid
ExtJs的grid功能很强大,但是有时候觉得总是少那么一点点功能,我们就来扩展它,让它用起来更方便. 今天我们要扩展的是:根据记录的选择数量来禁用或启用grid toolbar上的某些按钮. 本文所 ...
- U3D UGUI学习5 - Layout和文字适配
Layout这部分UGUI算是比NGUI做的到位 之前遇到了一个问题,NGUI做文字和背景框适配和容易,绑定一下就好了.UGUI你得弄Layout才可以,而且还需要配置. 但这个Layout使用场合是 ...
- Metro UI（Win 8风格）页面设计小记
一.Metro风格菜单——简单 HTML <div class="pagina "> <div class="linha"> <d ...
- E8.Net工作流平台之中国特色
特色之一领导排名有先后 领导排名是有潜规则的,不论是在企业通讯录中,还是企业员工目录中,不管在流程执行过程中,还是存档数据中,当前领导的排名一定要按潜规则展示,不能随便罗列.E8.Net工作流解决了 ...
- jQuery cxSelect 多级联动下拉菜单
随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...
- Python之xml文档及配置文件处理（ElementTree模块、ConfigParser模块）
本节内容 前言 XML处理模块 ConfigParser/configparser模块 总结 一.前言 我们在<中我们描述了Python数据持久化的大体概念和基本处理方式,通过这些知识点我们已经 ...
- 使用postgre数据库实现树形结构表的子-父级迭代查询，通过级联菜单简单举例
前言:开发常用的关系型数据库MySQL,mssql,postgre,Oracle,简单的增删改查的SQL语句都与标准SQL兼容,这个不用讲,那么对于迭代查询(不严格的叫法:递归查询)每种数据库都不一样 ...
随机推荐
- npm install 报-4048错误
报错原因: 有缓存 权限不够 有三种解决方法: 第一种:找到.npmrc文件并删除 在 C:\Users\自己用户的文件夹\ 下找到 .npmrc 文件并删除 注意:这个文件是隐藏的,需要显示隐藏才能 ...
- Chrome扩展的核心：manifest 文件（中）
大家好,我是 dom 哥.我正在写关于 Chrome 扩展开发的系列文章,感兴趣的可以 点个小星星 . 在上一篇中已经完成了 Chrome 扩展的雏形,本篇接着介绍 manifest 中的可选字段,完 ...
- vue-admin-template快速开发框架，菜单栏不显示层级结构
问题现象 路由 页面效果 解决办法 路由添加中配置 alwaysShow: true, // 树形层级显示 页面效果
- Java8新特性Stream流
1.是什么? Stream(流)是一个来自数据源的元素队列并支持聚合操作 2.能干嘛? Stream流的元素是特定类型的对象,形成一个队列. Java中的Stream并不会存储元素,而是按需计算. 数 ...
- 探索 ECMAScript 2023 中的新数组方法
前言 ECMAScript 2023 引入了一些新功能,以改进语言并使其更加强大和无缝.这个新版本带来了令人兴奋的功能和新的 JavaScript 数组方法,使使用 JavaScript 编程更加愉快 ...
- python生成列表的时间复杂度
在刷题的时候,经常碰到需要生成非常大的邻接矩阵,往往我们都是用 list 存储,但是我在最近刷题的过程中就遇上了TLE的情况,原因就是生成邻接矩阵时间太花时间了. 先说结论:[ ]* n 比 [ fo ...
- 国产 Web 组态软件在玻璃生产线中的应用
概述 随着工厂信息化.数字化发展,智慧生产车间成为必然发展趋势,通过智能硬件.物联网.大数据等智慧化技术与手段,提高车间生产设备.工艺设备的智能执行能力,从而提升整个车间乃至工厂的智能化.网络化 ...
- 自定义开发odoo14的统计在线用户人数
在 Odoo 14 中统计在线人数通常涉及到定制开发或者使用特定的模块. 自定义开发:如果没有现成的模块,您可能需要进行一些自定义开发.这通常涉及到扩展Odoo的用户模型,以跟踪用户的登录和登出活动. ...
- idea2020.1.3汉化包报错问题
已解决:idea2020.1.3汉化包报错问题 问题描述:插件市场提供的版本不对.不兼容,所以需要手动下载安装 这里附上文件 https://wwsi.lanzouq.com/b03czdtwf 密码 ...
- redis + AOP + 自定义注解实现接口限流
限流介绍 限流(rate limiting) 是指在一定时间内,对某些资源的访问次数进行限制,以避免资源被滥用或过度消耗.限流可以防止服务器崩溃.保证用户体验.提高系统可用性. 限流的方法有很多种 ...