實現不限層級的Element的NavMenu
阿新 • • 發佈：2020-08-26
做管理後臺開發的時候，需要用到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