el-menu递归菜单展示
<template>
<div>
<el-menu
mode="vertical"
background-color="#223958"
text-color="#fff"
active-text-color="#ffd04b"
class="el-menu-vertical-demo">
<SidebarItem v-for="route in permission_routes" :key="route.id" :item="route" />
</el-menu>
</div>
</template>
<script>
import SidebarItem from './SidebarItem'
export default {
name: 'customMenu',
components: {
SidebarItem },
data() {
return {
permission_routes: [
{
name: '1',
id: '1',
children: [
{
id: '1-1', name: '1-1' },
{
id: '1-2', name: '1-2' }
]
},
{
name: '2',
id: '2',
children: [
{
id: '2-1', name: '2-1' },
{
id: '2-2',
name: '2-2',
children: [
{
id: '2-2-1', name: '2-2-1' },
{
id: '2-2-2', name: '2-2-2' },
{
id: '2-2-3',
name: '2-2-3',
children: [
{
id: '2-2-3-1', name: '2-2-3-1' },
{
id: '2-2-3-2', name: '2-2-3-2' }
]
}
]
}
]
}
]
}
},
}
</script>
<style lang='less' scoped>
</style>
SidebarItem.vue组件代码
<template>
<div>
<template v-if="!item.children">
<el-menu-item :index="item.id">
{
{
item.name}}
</el-menu-item>
</template>
<el-submenu v-else ref="subMenu" :index="item.id" popper-append-to-body>
<template slot="title">
{
{
item.name}}
<!-- <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" /> -->
</template>
<sidebar-item
v-for="child in item.children"
:key="child.id"
:item="child"
class="nest-menu"
/>
</el-submenu>
</div>
</template>
<script>
export default {
name: 'SidebarItem',
props: {
item: {
type: Object,
required: true
},
},
data() {
this.onlyOneChild = null
return {
}
},
methods: {
hasOneShowingChild(children = [], parent) {
const showingChildren = children.filter(item => {
if (item.hidden) {
return false
} else {
// Temp set(will be used if only has one showing child)
this.onlyOneChild = item
return true
}
})
// When there is only one child router, the child router is displayed by default
if (showingChildren.length === 1) {
return true
}
// Show parent if there are no child router to display
if (showingChildren.length === 0) {
this.onlyOneChild = {
... parent, path: '', noShowingChildren: true }
return true
}
return false
},
resolvePath(routePath) {
return path.resolve(this.basePath, routePath)
}
}
}
</script>