实现不限层级的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
漫思
