vue+elementUI多级菜单动态渲染组件

逃离我推掉我的手 2022-05-24 06:51 413阅读 0赞

以下是组件代码：

\[HTML\]    [查看纯][Link 1] [字幕：][Link 1]

1.  **< ** **template ** **>**  
2.    **< ** **div ** class  =  “navMenu”  **>**   
3.    
4.      **< ** **label ** v-for  =  “navMenus中的navMenu”  **>**   
5.        **< ** **el-menu-item ** v-if  =  “navMenu.childs == null && navMenu.entity && navMenu.entity.state ==='ENABLE'”   
6.                      ：key  =  “navMenu.entity.id”  ：data  =  “navMenu”  ：index  =  “navMenu.entity.name”  ：route  =  “navMenu.entity.value”     
7.                      disabled  =  “”  **>**  
8.          **< ****i **：class = “navMenu.entity.icon” **> ****</ ****i ****>**   
9.          **< ****span **slot = “title” **> **\{ \{navMenu.entity.alias\}\} **</ ****span ****>**   
10.       **</ ****el-menu-item ****>**  
11.   
12.       **< ****el-submenu **v-if = “navMenu.childs && navMenu.entity && navMenu.entity.state ==='ENABLE'”   
13.                   ：key = “navMenu.entity.id” ：data = “navMenu” ：index = “navMenu.entity.name” **>**    
14.         **< ****template **slot = “title” **>**   
15.           **< ****i **：class = “navMenu.entity.icon” **> ****</ ****i ****>**   
16.           **< ****span ****> ** \{ \{navMenu.entity.alias\}\} **</ ****span ****>**  
17.         **</ ****template ****>**  
18.         **< ****NavMenu **：navMenus = “navMenu.childs” **> ****</ ****NavMenu ****>**   
19.       **</ ****el-submenu ****>**  
20.     **</ ****label ****>**  
21.   
22.   **</ ****div ****>**  
23. **</ ****template ****>**  
24.   
25. **< ****script ****>**  
26.   导出默认\{  
27.     名称：'NavMenu'，  
28.     道具：\['navMenus'\]，  
29.     data（）\{  
30.       返回\{\}  
31.     \}，  
32.     方法： \{\}  
33.   \}  
34. **</ ****script ****>**  
35.   
36. **< ****style ** scoped **>**  
37.   
38. **</ ****style ****>**

外部调用也比较简单

\[HTML\]    [查看纯][Link 1] [字幕：][Link 1]

1.  <！ - 左侧菜单组件 - >  
2.       **< ** **el-menu**  
3.         default-active  =  “0”  
4.         class  =  “el-menu-vertical-demo”  
5.         @  select  =  “menuSelected”  
6.         background-color  =  “＃F0F6F6”  
7.         text-color  =  “＃3C3F41”  
8.         active-text-color  =  “black”  **>**  
9.         **< ** **NavMenu ** ：navMenus  =  “leftMenus”  **> ** **</ ** **NavMenu ** **>**

1.       **</ ** **el-menu ** **>**

看看效果：

![70][]

值得一提的是，完成此菜单需要后端的配合，笔者这里后端给出的数据为：

\[javascript\]   [查看纯][Link 1] [文本][Link 1]

1.  \{  
2.      “实体” ：  **null** ，  
3.      “孩子” ：\[  
4.          \{  
5.              “实体” ：\{  
6.                  “id” ：1，  
7.                  “parentMenuId” ：0，  
8.                  “name” ：  “systemManage” ，  
9.                  “icon” ：  “el-icon-message \\ r \\ n” ，  
10.                 “别名” ：  “系统管理” ，  
11.                 “状态” ：  “启用” ，  
12.                 “排序” ：0，  
13.                 “值” ：  **null** ，  
14.                 "type": "NONE",  
15.                 "discription": "用于系统管理的菜单",  
16.                 "createUserId": 1  
17.             \},  
18.             "childs": \[  
19.                 \{  
20.                     "entity": \{  
21.                         "id": 3,  
22.                         "parentMenuId": 1,  
23.                         "name": "authManage",  
24.                         "icon": "el-icon-loading",  
25.                         "alias": "权限管理",  
26.                         "state": "ENABLE",  
27.                         "sort": 0,  
28.                         "value": "/system/auth",  
29.                         "type": "LINK",  
30.                         "discription": "用于权限管理的菜单",  
31.                         "createUserId": 1  
32.                     \},  
33.                     "childs": **null**  
34.                 \},  
35.                 \{  
36.                     "entity": \{  
37.                         "id": 4,  
38.                         "parentMenuId": 1,  
39.                         "name": "roleManage",  
40.                         "icon": "el-icon-bell",  
41.                         "alias": "角色管理",  
42.                         "state": "ENABLE",  
43.                         "sort": 1,  
44.                         "value": "/system/role",  
45.                         "type": "LINK",  
46.                         "discription": "用于角色管理的菜单",  
47.                         "createUserId": 1  
48.                     \},  
49.                     "childs": **null**  
50.                 \},  
51.                 \{  
52.                     "entity": \{  
53.                         "id": 2,  
54.                         "parentMenuId": 1,  
55.                         "name": "menuManage",  
56.                         "icon": "el-icon-edit",  
57.                         "alias": "菜单管理",  
58.                         "state": "ENABLE",  
59.                         "sort": 2,  
60.                         "value": "/system/menu",  
61.                         "type": "LINK",  
62.                         "discription": "用于菜单管理的菜单",  
63.                         "createUserId": 1  
64.                     \},  
65.                     "childs": **null**  
66.                 \},  
67.                 \{  
68.                     "entity": \{  
69.                         "id": 5,  
70.                         "parentMenuId": 1,  
71.                         "name": "groupManage",  
72.                         "icon": "el-icon-mobile-phone\\r\\n",  
73.                         "alias": "分组管理",  
74.                         "state": "ENABLE",  
75.                         "sort": 3,  
76.                         "value": "/system/group",  
77.                         "type": "LINK",  
78.                         "discription": "用于分组管理的菜单",  
79.                         "createUserId": 1  
80.                     \},  
81.                     "childs": **null**  
82.                 \}  
83.             \]  
84.         \},  
85.         \{  
86.             "entity": \{  
87.                 "id": 6,  
88.                 "parentMenuId": 0,  
89.                 "name": "userManage",  
90.                 "icon": "el-icon-news",  
91.                 "alias": "用户管理",  
92.                 "state": "ENABLE",  
93.                 "sort": 1,  
94.                 "value": **null**,  
95.                 "type": "NONE",  
96.                 "discription": "用于用户管理的菜单",  
97.                 "createUserId": 1  
98.             \},  
99.             "childs": \[  
100.                 \{  
101.                     "entity": \{  
102.                         "id": 7,  
103.                         "parentMenuId": 6,  
104.                         "name": "accountManage",  
105.                         "icon": "el-icon-phone-outline\\r\\n",  
106.                         "alias": "帐号管理",  
107.                         "state": "ENABLE",  
108.                         "sort": 0,  
109.                         "value": "",  
110.                         "type": "NONE",  
111.                         "discription": "用于帐号管理的菜单",  
112.                         "createUserId": 1  
113.                     \},  
114.                     "childs": \[  
115.                         \{  
116.                             "entity": \{  
117.                                 "id": 14,  
118.                                 "parentMenuId": 7,  
119.                                 "name": "emailManage",  
120.                                 "icon": "el-icon-sold-out\\r\\n",  
121.                                 "alias": "邮箱管理",  
122.                                 "state": "ENABLE",  
123.                                 "sort": 0,  
124.                                 "value": "/content/email",  
125.                                 "type": "LINK",  
126.                                 "discription": "用于邮箱管理的菜单",  
127.                                 "createUserId": 1  
128.                             \},  
129.                             "childs": **null**  
130.                         \},  
131.                         \{  
132.                             "entity": \{  
133.                                 "id": 13,  
134.                                 "parentMenuId": 7,  
135.                                 "name": "passManage",  
136.                                 "icon": "el-icon-service\\r\\n",  
137.                                 "alias": "密码管理",  
138.                                 "state": "ENABLE",  
139.                                 "sort": 1,  
140.                                 "value": "/content/pass",  
141.                                 "type": "LINK",  
142.                                 "discription": "用于密码管理的菜单",  
143.                                 "createUserId": 1  
144.                             \},  
145.                             "childs": **null**  
146.                         \}  
147.                     \]  
148.                 \},  
149.                 \{  
150.                     "entity": \{  
151.                         "id": 8,  
152.                         "parentMenuId": 6,  
153.                         "name": "integralManage",  
154.                         "icon": "el-icon-picture",  
155.                         "alias": "积分管理",  
156.                         "state": "ENABLE",  
157.                         "sort": 1,  
158.                         "value": "/user/integral",  
159.                         "type": "LINK",  
160.                         "discription": "用于积分管理的菜单",  
161.                         "createUserId": 1  
162.                     \},  
163.                     "childs": **null**  
164.                 \}  
165.             \]  
166.         \},  
167.         \{  
168.             "entity": \{  
169.                 "id": 9,  
170.                 "parentMenuId": 0,  
171.                 "name": "contentManage",  
172.                 "icon": "el-icon-rank",  
173.                 "alias": "内容管理",  
174.                 "state": "ENABLE",  
175.                 "sort": 2,  
176.                 "value": **null**,  
177.                 "type": "NONE",  
178.                 "discription": "用于内容管理的菜单",  
179.                 "createUserId": 1  
180.             \},  
181.             "childs": \[  
182.                 \{  
183.                     "entity": \{  
184.                         "id": 10,  
185.                         "parentMenuId": 9,  
186.                         "name": "classifyManage",  
187.                         "icon": "el-icon-printer",  
188.                         "alias": "分类管理",  
189.                         "state": "ENABLE",  
190.                         "sort": 0,  
191.                         "value": "/content/classify",  
192.                         "type": "LINK",  
193.                         "discription": "用于分类管理的菜单",  
194.                         "createUserId": 1  
195.                     \},  
196.                     "childs": **null**  
197.                 \},  
198.                 \{  
199.                     "entity": \{  
200.                         "id": 11,  
201.                         "parentMenuId": 9,  
202.                         "name": "articleManage",  
203.                         "icon": "el-icon-star-on",  
204.                         "alias": "文章管理",  
205.                         "state": "ENABLE",  
206.                         "sort": 1,  
207.                         “value” ：  “/ content / article” ，  
208.                         “type” ：  “LINK” ，  
209.                         “discription” ：  “用于文章管理的菜单” ，  
210.                         “createUserId” ：1  
211.                     \}，  
212.                     “孩子” ：  **空**  
213.                 \}，  
214.                 \{  
215.                     “实体” ：\{  
216.                         “id” ：12，  
217.                         “parentMenuId” ：9，  
218.                         “name” ：  “commentManage” ，  
219.                         “icon” ：  “el-icon-share” ，  
220.                         “别名” ：  “评论管理” ，  
221.                         “状态” ：  “启用” ，  
222.                         “排序” ：2，  
223.                         “value” ：  “/ content / comment” ，  
224.                         “type” ：  “LINK” ，  
225.                         “discription” ：  “用于评论管理的菜单” ，  
226.                         “createUserId” ：1  
227.                     \}，  
228.                     “孩子” ：  **空**  
229.                 \}  
230.             \]  
231.         \}  
232.     \]  
233. \}

总结：当遇到多叉树或无限层级问题时，VUE的递归组件是个比较好的解决方案，可以较大的节约开发时间降低开发成本。

网址：https ：//blog.csdn.net/goodsave/article/details/78879842

[Link 1]: https://blog.csdn.net/goodsave/article/details/78879842#
[70]: /images/20220524/e8376980411042c1a04481b7712acbae.png