Update SidebarItem.vue

组件递归
无children也可复用
This commit is contained in:
王洪莹 2018-11-20 16:33:13 +08:00 committed by GitHub
parent 4a07432468
commit c9d046a8e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 19 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<div v-if="!item.hidden&&item.children" class="menu-wrapper"> <div v-if="!item.hidden" class="menu-wrapper">
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow"> <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
<app-link :to="resolvePath(onlyOneChild.path)"> <app-link :to="resolvePath(onlyOneChild.path)">
@ -11,24 +11,12 @@
<el-submenu v-else ref="submenu" :index="resolvePath(item.path)"> <el-submenu v-else ref="submenu" :index="resolvePath(item.path)">
<template slot="title"> <template slot="title">
<item v-if="item.meta" :icon="item.meta.icon" :title="generateTitle(item.meta.title)" /> <item :icon="item.meta && item.meta.icon" :title="generateTitle(item.meta.title)" />
</template> </template>
<template v-for="child in item.children" v-if="!child.hidden"> <sidebar-item v-for="child in item.children" :is-nest="true" :item="child"
<sidebar-item :key="child.path" :base-path="resolvePath(child.path)" class="nest-menu">
v-if="child.children&&child.children.length>0" </sidebar-item>
:is-nest="true"
:item="child"
:key="child.path"
:base-path="resolvePath(child.path)"
class="nest-menu" />
<app-link v-else :to="resolvePath(child.path)" :key="child.name">
<el-menu-item :index="resolvePath(child.path)">
<item v-if="child.meta" :icon="child.meta.icon" :title="generateTitle(child.meta.title)" />
</el-menu-item>
</app-link>
</template>
</el-submenu> </el-submenu>
</div> </div>
@ -67,7 +55,7 @@ export default {
} }
}, },
methods: { methods: {
hasOneShowingChild(children, parent) { hasOneShowingChild(children = [], parent) {
const showingChildren = children.filter(item => { const showingChildren = children.filter(item => {
if (item.hidden) { if (item.hidden) {
return false return false