feat: support multi-level nested menus

arco-design · Apr 22, 2022 · a24a209 · a24a209
1 parent 2340e30
commit a24a209
Showing 1 changed file with 16 additions and 13 deletions.
diff --git a/arco-design-pro-vite/src/components/menu/index.vue b/arco-design-pro-vite/src/components/menu/index.vue
@@ -86,7 +86,8 @@
       };
       listenerRouteChange((newRoute) => {
         if (newRoute.meta.requiresAuth && !newRoute.meta.hideInMenu) {
-          const key = newRoute.matched[2]?.name as string;
+          const key = newRoute.matched[newRoute.matched.length - 1]
+            ?.name as string;
           selectedKey.value = [key];
         }
       }, true);
@@ -101,25 +102,26 @@
             _route.forEach((element) => {
               // This is demo, modify nodes as needed
               const icon = element?.meta?.icon
-                ? `<${element?.meta?.icon}/>`
-                : ``;
-              const r = (
+                ? () => h(compile(`<${element?.meta?.icon}/>`))
+                : null;
+              const r = element?.children ? (
                 <a-sub-menu
                   key={element?.name}
                   v-slots={{
-                    icon: () => h(compile(icon)),
+                    icon,
                     title: () => h(compile(t(element?.meta?.locale || ''))),
                   }}
                 >
-                  {element?.children?.map((elem) => {
-                    return (
-                      <a-menu-item key={elem.name} onClick={() => goto(elem)}>
-                        {t(elem?.meta?.locale || '')}
-                        {travel(elem.children ?? [])}
-                      </a-menu-item>
-                    );
-                  })}
+                  {travel(element?.children)}
                 </a-sub-menu>
+              ) : (
+                <a-menu-item
+                  key={element?.name}
+                  v-slots={{ icon }}
+                  onClick={() => goto(element)}
+                >
+                  {t(element?.meta?.locale || '')}
+                </a-menu-item>
               );
               nodes.push(r as never);
             });
@@ -128,6 +130,7 @@
         }
         return travel(menuTree.value);
       };
+
       return () => (
         <a-menu
           v-model:collapsed={collapsed.value}