fix #I8550V https://gitee.com/dromara/RuoYi-Vue-Plus/issues/I8550V

src/assets/styles/sidebar.scss

@@ -227,23 +227,4 @@
       margin-right: 16px;
     }
   }
-
-  // the scroll bar appears when the sub-menu is too long
-  > .el-menu--popup {
-    max-height: 100vh;
-    overflow-y: auto;
-
-    &::-webkit-scrollbar-track-piece {
-      background: #d3dce6;
-    }
-
-    &::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: #99a9bf;
-      border-radius: 20px;
-    }
-  }
 }

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="!item.hidden">
-    <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
+    <template v-if="hasOneShowingChild(item, item.children) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
           <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
@@ -18,10 +18,10 @@
       </template>
 
       <sidebar-item
-        v-for="child in item.children"
+        v-for="(child) in item.children as RouteOption[]"
         :key="child.path"
         :is-nest="true"
-        :item="child as RouteOption"
+        :item="child"
         :base-path="resolvePath(child.path)"
         class="nest-menu"
       />
@@ -34,7 +34,6 @@ import { isExternal } from '@/utils/validate'
 import AppLink from './Link.vue'
 import { getNormalPath } from '@/utils/ruoyi'
 import { RouteOption } from "vue-router";
-import { PropType } from "vue";
 
 const props = defineProps({
     // route object
@@ -54,7 +53,7 @@ const props = defineProps({
 
 const onlyOneChild = ref<any>({});
 
-const hasOneShowingChild = (children:RouteOption[] = [], parent: RouteOption) => {
+const hasOneShowingChild = (parent: RouteOption, children?:RouteOption[]) => {
     if (!children) {
         children = [];
     }
@@ -76,9 +75,13 @@ const hasOneShowingChild = (children:RouteOption[] = [], parent: RouteOption) =>
     // Show parent if there are no child router to display
     if (showingChildren.length === 0) {
         onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
+        if (parent.name === '2222') {
+          console.log(onlyOneChild.value)
+        }
         return true
     }
 
+
     return false
 };
 

src/layout/components/Sidebar/index.vue

@@ -4,7 +4,7 @@
     <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
       <transition :enter-active-class="proxy?.animate.menuSearchAnimate.enter" mode="out-in">
         <el-menu
-          :default-active="activeMenu as string"
+          :default-active="activeMenu"
           :collapse="isCollapse"
           :background-color="bgColor"
           :text-color="textColor"
@@ -27,6 +27,7 @@ import variables from '@/assets/styles/variables.module.scss'
 import useAppStore from '@/store/modules/app'
 import useSettingsStore from '@/store/modules/settings'
 import usePermissionStore from '@/store/modules/permission'
+import { RouteOption } from "vue-router";
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const route = useRoute();
@@ -34,7 +35,7 @@ const appStore = useAppStore()
 const settingsStore = useSettingsStore()
 const permissionStore = usePermissionStore()
 
-const sidebarRouters =  computed(() => permissionStore.sidebarRouters);
+const sidebarRouters =  computed<RouteOption[]>(() => permissionStore.sidebarRouters);
 const showLogo = computed(() => settingsStore.sidebarLogo);
 const sideTheme = computed(() => settingsStore.sideTheme);
 const theme = computed(() => settingsStore.theme);