实现不限层级的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兼容,这个不用讲,那么对于迭代查询(不严格的叫法:递归查询)每种数据库都不一样 ...
随机推荐
- Linux笔记03: Linux常用命令_3.3文件操作命令
3.3 文件操作命令 3.3.1 stat命令 ●命令名称:stat. ●英文原意:display file or file system status. ●所在路径:/usr/bin/stat. ● ...
- Tensorflow2.0实现VGG13
导入必要的库: import os import tensorflow as tf from tensorflow import keras from tensorflow.keras import ...
- kubernetes之部署springboot项目jar项目（三）
kubernetes之部署war项目(三) k8s系列 源自我工作上的实际场景,记录于此. k8s部署springboot项目 假设我的jar项目是:myjar.jar 用到的环境 centos 7. ...
- 使用Spring AI让你的Spring Boot应用快速拥有生成式AI能力
之前分享了关于Spring新项目Spring AI的介绍视频.视频里演示了关于使用Spring AI将Open AI的能力整合到Spring应用中的操作,但有不少读者提到是否有博客形式的学习内容.所以 ...
- 19、Flutter StatelessWidget 、 StatefulWidget
在Flutter中自定义组件其实就是一个类,这个类需要继承StatelessWidget / StatefulWidget. StatelessWidget是无状态组件,状态不可变的widget ...
- JQuery中美元符号$
目录 1. 概述 2. 详论 2.1. 加载脚本 2.2. 选择器 2.2.1. 元素选择器 2.2.2. ID选择器 2.2.3. 类选择器 2.3. 引入方法 3. 参考 1. 概述 前端技术得更 ...
- 云图说丨初识华为云OrgID：轻松实现统一帐号、统一授权
本文分享自华为云社区<[云图说]第282期 初识华为云OrgID:轻松实现统一帐号.统一授权>,作者: 阅识风云 . 组织成员帐号 OrgID是面向企业提供组织管理.企业成员帐号管理以及S ...
- 云图说|ModelArts开发环境，让AI开发、探索、教学更简单
摘要:ModelArts开发环境,以云原生的资源使用和开发工具链的集成,目标为不同类型AI开发.探索.教学用户. 本文分享自华为云社区<[云图说]| 第280期 ModelArts开发环境,让A ...
- 案例集锦|科技赋能，华为云GaussDB助千行百业数字化转型
当下,全社会驶入数字化转型快车道,以科技赋能.智慧转型为主旨的数字生态推动着千行百业的变革.数据库作为企业核心数据底座,华为云提供了安全可靠的云原生底座和一站式上云解决方案.其中华为云GaussDB覆 ...
- Java反射机制清空字符串导致业务异常分析
摘要:笔者在处理业务线问题时遇到接口返回的内容和实际内容不一致的现象. 本文分享自华为云社区<Java反射机制清空字符串导致业务异常分析>,作者:毕昇小助手. 编者按:笔者在处理业务线问题 ...