参考其他资料进行修改。
hidden当菜单不出现在侧边栏时设置为true
isNest是否嵌套,是的话里面的el-submenu不再生成图标,即只有最外层的才会生成。
<template>
<div v-if="!item.hidden">
<template v-if="hasNoChild(item)">
<el-menu-item :index="item.menuUrl" :class="{'submenu-title-noDropdown':!isNest}">
<template slot="title">
<i v-if='!isNest' class="menuIcon"></i>
<span> {{item.menuName}}</span>
</template>
</el-menu-item>
</template>
<el-submenu v-else ref="submenu" :index="item.menuUrl">
<template slot="title">
<i v-if='!isNest' class="menuIcon"></i>
<span>{{item.menuName}}</span>
</template>
<template v-for="(child,i) in item.childList">
<sidebar-item v-if="child.childList&&child.childList.length>0" :is-nest="true" :item="child" :key="i" class="nest-menu" />
<el-menu-item v-if="hasNoChild(child)" :index="child.menuUrl" :key="child.menuCode">
{{child.menuName}}
</el-menu-item>
</template>
</el-submenu>
</div>
</template>
<script>
export default {
menuName: 'SidebarItem',
props: {
// route object
item: {
type: Object,
required: true
},
isNest: {
type: Boolean,
default: false
},
basePath: {
type: String,
default: ''
}
},
data () {
return {
onlyOneChild: null
}
},
methods: {
hasNoChild (item) {
if (item.childList && item.childList.length > 0) {
return false
}
return true
}
}
}
</script>
使用方式如下
引入组件注册
import SidebarItem from ‘@/components/SidebarItem’
<el-menu :default-active="$route.meta.parentRoute?$route.meta.parentRoute:$route.path" class="el-menu-vertical-demo" background-color="#182428" text-color="#c8c8c8" :unique-opened="true" router>
<sidebar-item v-for="(item,i) in menuList" :key="i" :item="item"/>
</el-menu>