Browse Source

fixed: sidebar has no children bug

Pan 6 years ago
parent
commit
adec74c04a
1 changed files with 14 additions and 6 deletions
  1. 14 6
      src/views/layout/components/Sidebar/SidebarItem.vue

+ 14 - 6
src/views/layout/components/Sidebar/SidebarItem.vue

@@ -1,7 +1,7 @@
1
 <template>
1
 <template>
2
   <div v-if="!item.hidden&&item.children" class="menu-wrapper">
2
   <div v-if="!item.hidden&&item.children" class="menu-wrapper">
3
 
3
 
4
-    <template v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow">
4
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
5
       <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
5
       <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
6
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
6
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
7
           <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
7
           <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
@@ -21,8 +21,7 @@
21
           :item="child"
21
           :item="child"
22
           :key="child.path"
22
           :key="child.path"
23
           :base-path="resolvePath(child.path)"
23
           :base-path="resolvePath(child.path)"
24
-          class="nest-menu"/>
25
-
24
+          class="nest-menu" />
26
         <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
25
         <a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
27
           <el-menu-item :index="resolvePath(child.path)">
26
           <el-menu-item :index="resolvePath(child.path)">
28
             <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
27
             <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
@@ -43,7 +42,7 @@ export default {
43
   name: 'SidebarItem',
42
   name: 'SidebarItem',
44
   components: { Item },
43
   components: { Item },
45
   props: {
44
   props: {
46
-    // route配置json
45
+    // route object
47
     item: {
46
     item: {
48
       type: Object,
47
       type: Object,
49
       required: true
48
       required: true
@@ -63,19 +62,28 @@ export default {
63
     }
62
     }
64
   },
63
   },
65
   methods: {
64
   methods: {
66
-    hasOneShowingChild(children) {
65
+    hasOneShowingChild(children, parent) {
67
       const showingChildren = children.filter(item => {
66
       const showingChildren = children.filter(item => {
68
         if (item.hidden) {
67
         if (item.hidden) {
69
           return false
68
           return false
70
         } else {
69
         } else {
71
-          // temp set(will be used if only has one showing child )
70
+          // Temp set(will be used if only has one showing child)
72
           this.onlyOneChild = item
71
           this.onlyOneChild = item
73
           return true
72
           return true
74
         }
73
         }
75
       })
74
       })
75
+
76
+      // When there is only one child router, the child router is displayed by default
76
       if (showingChildren.length === 1) {
77
       if (showingChildren.length === 1) {
77
         return true
78
         return true
78
       }
79
       }
80
+
81
+      // Show parent if there are no child router to display
82
+      if (showingChildren.length === 0) {
83
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
84
+        return true
85
+      }
86
+
79
       return false
87
       return false
80
     },
88
     },
81
     resolvePath(routePath) {
89
     resolvePath(routePath) {