vue element 递归左侧菜单栏，可收缩

调用的地方 

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>