子组件: leftMenu.vue

<template>
  <div>
    <!-- 根据实际情况做修改 -->

    <el-submenu
      v-for="item in navlist"
      :key="item.adminMenu.id + '1'"
      v-show="item.adminMenu.menuType=='list'"
      :index="item.adminMenu.code"
    >
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>{{item.adminMenu.menuName}}</span>
      </template>
      <NavMenu :navlist="item.children"></NavMenu>
    </el-submenu>

    <el-menu-item
      v-for="item in navlist"
      :key="item.adminMenu.id + '2'"
      v-show="item.adminMenu.menuType=='page'"
      :index="item.adminMenu.url"
    >
      <i class="el-icon-location"></i>
      <span>{{item.adminMenu.menuName}}</span>
    </el-menu-item>
  </div>
</template>
 
<script>
export default {
  name: "NavMenu",
  props: ["navlist"],
  data() {
    return {
     
    };
  },
  methods: {}
};
</script>
<style lang='scss' >
//如果没有此样式的话  折叠有子级菜单的父菜单文字是不会隐藏的
.el-menu--collapse .el-menu-item span,
.el-menu--collapse .el-submenu .el-submenu__title span {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}
.el-menu{
  width: 200px;
   .el-submenu__icon-arrow{
    opacity: 1;
  }
}
.el-menu--collapse{
  width: 60px!important;
  .el-submenu__icon-arrow{
    opacity: 0;
  }
}
</style>

父组件： index.

 <template>
     <el-menu style="text-align:left" default-active="2" class="el-menu-vertical-demo"  :collapse-transition="true"   background-color="#222D32" text-color="#fff" 
    
        :unique-opened="true" router active-text-color="#ffd04b">
         
                  <NavMenu :navlist="navlist"></NavMenu>
        </el-menu>
        
        </template>
        
        <script>
       import NavMenu from "@/components/leftMenu/leftMenu";
          export default {
            components: {
              NavMenu
            },
            data() {
		        return {
		          avatar: require("../../../../assets/img/avatar.jpg"),
		          navlist: [
		            {
		              adminMenu: {
		                id: 70,
		                menuName: "客户管理",
		                menuType: "page",
		                pid: "0",
		                url: "/customer",
		                icon: null,
		                sort: 1,
		                deep: 1,
		                code: "customer.user.view",
		                resource: "customer.user.view"
		              },
		              children: []
		            },
		            {
		              adminMenu: {
		                id: 99,
		                menuName: "统计报表",
		                menuType: "list",
		                pid: "0",
		                url: "#",
		                icon: null,
		                sort: 7,
		                deep: 1,
		                code: "statistics",
		                resource: "statistics"
		              },
		              children: [
		                {
		                  adminMenu: {
		                    id: 109,
		                    menuName: "产品运营总览中心",
		                    menuType: "page",
		                    pid: "99",
		                    url: "/statistics/core",
		                    icon: null,
		                    sort: 1,
		                    deep: 2,
		                    code: "statistics.core",
		                    resource: "statistics.core"
		                  },
		                  children: []
		                },
		                {
		                  adminMenu: {
		                    id: 123,
		                    menuName: "运营报表",
		                    menuType: "list",
		                    pid: "99",
		                    url: "#",
		                    icon: null,
		                    sort: 2,
		                    deep: 2,
		                    code: "statistics.yyyw",
		                    resource: "statistics.yyyw"
		                  },
		                  children: [
		                    {
		                      adminMenu: {
		                        id: 124,
		                        menuName: "运营业务报表",
		                        menuType: "page",
		                        pid: "123",
		                        url: "/tjbb/Operaional",
		                        icon: null,
		                        sort: 5,
		                        deep: 3,
		                        code: "statistics.yunying",
		                        resource: "statistics.yunying"
		                      },
		                      children: []
		                    }
		                  ]
		                },
		                {
		                  adminMenu: {
		                    id: 115,
		                    menuName: "贷后管理报表",
		                    menuType: "list",
		                    pid: "99",
		                    url: "#",
		                    icon: null,
		                    sort: 3,
		                    deep: 2,
		                    code: "poi",
		                    resource: "poi"
		                  },
		                  children: [
		                    {
		                      adminMenu: {
		                        id: 116,
		                        menuName: "风险总览样表",
		                        menuType: "page",
		                        pid: "115",
		                        url: "/tjbb/riskbb",
		                        icon: null,
		                        sort: 1,
		                        deep: 3,
		                        code: "statistics.risk",
		                        resource: "statistics.risk"
		                      },
		                      children: []
		                    },
		                    {
		                      adminMenu: {
		                        id: 117,
		                        menuName: "催收报表",
		                        menuType: "page",
		                        pid: "115",
		                        url: "/tjbb/csbb",
		                        icon: null,
		                        sort: 2,
		                        deep: 3,
		                        code: "statistics.dun",
		                        resource: "statistics.dun"
		                      },
		                      children: []
		                    },
		                    {
		                      adminMenu: {
		                        id: 118,
		                        menuName: "首贷续贷入催率和回收率",
		                        menuType: "page",
		                        pid: "115",
		                        url: "/tjbb/jinandchu",
		                        icon: null,
		                        sort: 4,
		                        deep: 3,
		                        code: "statistics.poi",
		                        resource: "statistics.poi"
		                      },
		                      children: []
		                    },
		                    {
		                      adminMenu: {
		                        id: 119,
		                        menuName: "7日内提前还款报表",
		                        menuType: "page",
		                        pid: "115",
		                        url: "/tjbb/day7",
		                        icon: null,
		                        sort: 5,
		                        deep: 3,
		                        code: "statistics.poi.seven",
		                        resource: "statistics.poi.seven"
		                      },
		                      children: []
		                    }
		                  ]
		                },
		                {
		                  adminMenu: {
		                    id: 110,
		                    menuName: "第三方统计",
		                    menuType: "list",
		                    pid: "99",
		                    url: "#",
		                    icon: null,
		                    sort: 4,
		                    deep: 2,
		                    code: "statistics.third",
		                    resource: "statistics.third"
		                  },
		                  children: [
		                    {
		                      adminMenu: {
		                        id: 111,
		                        menuName: "Advance AI",
		                        menuType: "page",
		                        pid: "110",
		                        url: "/statistics/third",
		                        icon: null,
		                        sort: 1,
		                        deep: 3,
		                        code: "statistics.third.advanceai",
		                        resource: "statistics.third.advanceai"
		                      },
		                      children: []
		                    }
		                  ]
		                },
		                {
		                  adminMenu: {
		                    id: 100,
		                    menuName: "渠道数据",
		                    menuType: "page",
		                    pid: "99",
		                    url: "/statistics/channel",
		                    icon: null,
		                    sort: 5,
		                    deep: 2,
		                    code: "statistics.channel",
		                    resource: "statistics.channel"
		                  },
		                  children: []
		                }
		              ]
		            }
		          ]
		        };
		      },
          }
        </script>
       
        <style lang="scss" scoped>
         	    .el-menu {
			      border: none;
			    }
			    .el-menu-vertical-demo:not(.el-menu--collapse) {
			      width: 218px;
			      min-height: 600px;
			    }
			    .el-menu-vertical-demo {
			      width: 35px;
			    }
			    .el-submenu .el-menu-item {
			      min-width: 218px;
			    }
			    .hiddenDropdown,
			    .hiddenDropname {
			      display: none;
			    }
          </style>

转载: https://blog.csdn.net/qq_42076140/article/details/83588766