调用的地方
TreeMenu为递归菜单组件
<template>
<div class="bgk">
<div class="leftMenuBk" :style="isCollapse">
<el-scrollbar class="scrollbar-wrapper">
<div>
<i :class="[isShow==true? 'el-icon-s-unfold':'el-icon-s-fold']" @click="isShow=!isShow" style="font-size: 25px; color: #ffffff;margin-left:10%"></i>
</div>
<!-- 侧边栏菜单区域 -->
<el-menu default-active="1-4-1" style="height:100vh" text-color="#ffffff" :popper-append-to-body="true" :hide-timeout="500" class="el-menu-vertical-demo" :collapse="isShow" :unique-opened="true" v-if="sidebarList">
<div v-for="(item, index) in sidebarList" :key="index">
<TreeMenu :treedata="item"></TreeMenu>
</div>
</el-menu>
</el-scrollbar>
</div>
</div>
</template>
<script>
import TreeMenu from "./treemenu";
export default {
name: "Sidebar",
components: {
TreeMenu,
},
data() {
return {
// 是否折叠
isShow: false,
openMenu: [],
username: "",
};
},
computed: {
isCollapse(){
return (params)=>{
if(isShow == true){
return {'width':'200px'}
}else{
return {'width':'64px'}
}
}
},
sidebarList() {
return [
{
key: "index",
ico: "el-icon-document",
value: "导航一",
},
{
key: "permission",
ico: "el-icon-data-line",
value: "导航二",
child: [
{
key: "adminlist",
ico: "el-icon-document",
value: "选项1",
},
{
key: "role",
ico: "el-icon-document",
value: "选项2",
},
{
key: "authManage",
ico: "el-icon-document",
value: "选项3",
},
],
},
{
key: "member",
ico: "el-icon-printer",
value: "导航三",
child: [
{
key: "/member/memberList",
ico: "el-icon-document",
value: "选项1",
child: [
{
key: "/member/memberList",
ico: "el-icon-document",
value: "选项1",
},
]
},
{
key: "/member/memberSearch",
ico: "el-icon-document",
value: "选项2",
},
{
key: "New_business",
ico: "el-icon-document",
value: "选项3",
},
{
key: "Real_name",
ico: "el-icon-document",
value: "选项4",
},
{
key: "invitation",
ico: "el-icon-document",
value: "选项5",
},
],
},
];
},
},
};
</script>
<style lang="scss" scoped>
.leftMenuBk{
/* background: none !important; */
background: url("../../../../../assets/knowloge/menu.png") no-repeat;
background-size: 100% 100%;
}
::v-deep .menuCollapse :not(:first-child) {
display: none;
}
// ::v-deep .el-menu{
// background: none ;
// }
::v-deep .el-menu:not(.el-menu--collapse) {
width: 100%;
}
::v-deep .el-submenu__title:hover{
background: none;
}
::v-deep .el-menu-item:focus, .el-menu-item:hover{
background:none;
}
::v-deep .el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>
<style>
.el-menu--popup-right-start{
background: #4e7ba5;
}
</style>
递归组件 hreemenu.vue
<template>
<div>
<el-submenu v-if="treedata.child && treedata.child.length > 0" :index="treedata.key">
<template slot="title">
<i :class="treedata.ico" v-if="treedata.ico"></i>
<span slot="title">{{ treedata.value }}</span>
</template>
<div v-for="(children, index) in treedata.child" v-bind:key="index">
<!--递归调用自身,这里主要根据name的名字-->
<treeItem :treedata="children"></treeItem>
</div>
</el-submenu>
<el-menu-item v-else :index="treedata.key">
<i :class="treedata.ico" v-if="treedata.ico"></i>
<span slot="title">{{ treedata.value }}</span>
</el-menu-item>
</div>
</template>
<script>
export default {
name: "treeItem",
props: ["treedata"],
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
/*隐藏文字*/
.el-menu--collapse .el-submenu__title span {
display: none;
}
::v-deep .el-menu-item:focus,
.el-menu-item:hover {
background: none;
}
</style>