element-ui实现动态菜单栏并处理菜单栏折叠文本不隐藏问题

客官°小女子只卖身不卖艺 2022-11-07 11:36 798阅读 0赞

element-ui实现动态菜单栏 并处理菜单栏折叠文本不隐藏问题  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYXdlbnlpMTIzNA_size_16_color_FFFFFF_t_70]

<template>
      <el-aside style="width: auto"  >
      
      <el-menu
          :unique-opened="true"
          router
          class="el-menu-vertical-demo"
          @open="handleOpen"
          :default-active="defaultActive"
          @select="handleSelect"
          :collapse="iscollapse"
          active-text-color="#FF8500"
          text-color="#ffffff"
          background-color="#001529"
        > 
        
           <fragment class="user-menu-box" v-for="menu in menus" :key="menu.id">
            
            <el-menu-item v-if="!menu.child" :index="menu.path">
              
                <i :class="menu.icon"></i>
                <span slot="title">{
       { menu.name }}</span>
              
            </el-menu-item> 
            
            <el-submenu v-if="menu.child" :index="menu.path">
              <template slot="title">
                <i :class="menu.icon"></i>
                <span slot="title">{
       { menu.name }}</span>
              </template>
              <z-menu :menus="menu.children"></z-menu>
              
            </el-submenu>
          </fragment>
         </el-menu> 
         
      </el-aside>
    </template>
    <style lang="less">
       .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
      }
    .el-aside {
      width: 200px;
       background-color: #001529
    }
    .el-asides{
      width: 64px;
       background-color: #001529
    }
    .el-menu{
      border-right: solid 0px #e6e6e6 !important;
    }
    </style>
    <script>
    export default {
     
      data() {
        return {
         
          activeMenu: '',
          indexBreadcrumbs: '',
          menus: [
            {
              id: "1",
              name: "系统首页",
              icon: "el-icon-location",
              path: "/nn",
            },
            {
              id: "2",
              name: "产品管理",
              icon: "el-icon-menu",
              path: "/mm",
              child: [
                {
                  id: "2-1",
                  name: "产品列表",
                  path: "/home",
                },
                {
                  id: "2-2",
                  name: "精选好货",
                  path: "/About",
                },
                {
                  id: "2-3",
                  name: "分类管理",
                  path: "/ba",
                }
              ],
            },
            {
              id: "3",
              name: "订单信息",
              icon: "el-icon-setting",
              path: "/xx",
               child: [
                {
                  id: "3-1",
                  name: "订单信息",
                  path: "/1",
                }
              ],
            },
            {
              id: "4",
              name: "提现管理",
              icon: "el-icon-menu",
              path: "#2",
              child: [
                {
                  id: "4-1",
                  name: "提现审核",
                  path: "/",
                },
                {
                  id: "4-2",
                  name: "结算记录",
                  path: "/",
                },
                {
                  id: "4-3",
                  name: "提现配置",
                  path: "/",
                }
              ],
            },
            {
              id: "5",
              name: "会员管理",
              icon: "el-icon-menu",
              path: "#3",
              child: [
                {
                  id: "5-1",
                  name: "会员列表",
                  path: "/",
                },
                {
                  id: "5-2",
                  name: "等级管理",
                  path: "/",
                },
                {
                  id: "5-3",
                  name: "记录管理",
                  path: "/",
                }
              ],
            },
            {
              id: "6",
              name: "内容管理",
              icon: "el-icon-menu",
              path: "#4",
              child: [
                {
                  id: "6-1",
                  name: "文章列表",
                  path: "/",
                },
                {
                  id: "6-2",
                  name: "热搜管理",
                  path: "/",
                },
                {
                  id: "6-3",
                  name: "图片管理",
                  path: "/",
                }
              ],
            },
            {
              id: "7",
              name: "系统管理",
              icon: "el-icon-menu",
              path: "#5",
              child: [
                {
                  id: "7-1",
                  name: "角色管理",
                  path: "/",
                },
                {
                  id: "7-2",
                  name: "管理员管理",
                  path: "/",
                },
                {
                  id: "7-3",
                  name: "操作日志",
                  path: "/",
                },
                {
                  id: "7-4",
                  name: "账号安全",
                  path: "/",
                }
              ],
            },
          ],
        };
      },
      watch: {
        // 监听路由的改变(实时改变面包屑数据)
        $route() {
          this.indexBreadcrumbs = localStorage.getItem('path').split(",")
           this.breadcrumbList();
        },
      },
      computed: {
        // 获取路由,（监听菜单的改变）
        defaultActive(index, indexPath) {
          console.log('路由变化')
          return this.$route.path;
        },
      },
      props: {
        defaultMsg: {
          type: String,
        },
        config: {
          type: Object,
        },
        iscollapse:{
          type: Boolean,
        }
      },
      mounted() {
        console.log(this._props,this)
      },
      methods: {
        // 获取选中的菜单的数据
        handleSelect (index, indexPath) {
          this.indexBreadcrumbs = indexPath // indexPath为一个数组，里面包含选中的菜单，和菜单的index标识
          localStorage.setItem('path',this.indexBreadcrumbs)
          console.log(this.indexBreadcrumbs)
        },
        // 获取面包屑数据(将选中菜单的数据进行处理,得到面包屑的数据)
        breadcrumbList() {
          let breadcrumbs = [];
          let menuList = this.menus;
          console.log(this.menus)
          this.indexBreadcrumbs.map((item) => {
            for (let i = 0; i < menuList.length; i++) {
              if (item === menuList[i].path) {
                breadcrumbs.push(menuList[i]);
                if (menuList[i].child) {
                  menuList = menuList[i].child;
                }
                break;
              }
            }
          });
          this.$emit('change',breadcrumbs) // 返回的一个数组，里面只包含选中的菜单
        },
    
        // 
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
          },
          handleClose(key, keyPath) {
            console.log(key, keyPath);
          }
      },
      created() {
        this.indexBreadcrumbs = localStorage.getItem('path').split(",")
        this.breadcrumbList();
      },
      destroyed() {
        
      },
    };
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYXdlbnlpMTIzNA_size_16_color_FFFFFF_t_70]: /images/20221023/87113a2c40f645c2a872ea0741402ecb.png