element ui菜单栏动态渲染

小咪咪 2022-11-30 12:52 132阅读 0赞

> 直接上代码，模块清晰，自己赋值粘贴都行

<el-menu 
           :default-active="this.$route.path"
           :unique-opened="true"
           router
           class="el-menu-vertical-demo"
           background-color="#393e46"
           text-color="#fff"
           active-text-color="#4480e9"
           style="height: 100%;border-right: solid 0px #e6e6e6;width:150px"
           background-color="#393e46" text-color="#fff" active-text-color="#ffd04b" :collapse="getMenuSwitchState">
    	  
    	  <el-menu-item :index="item.path" v-for="item in noChildren" :key="item.path">
    	    <i :class="'el-icon-' + item.icon"></i>
    	    <span slot="title">{ { item.label}}</span>
    	  </el-menu-item>	
    	  
    	  <el-submenu :index=index.toString() v-for="(item,index) in hasChildren" :key="index">
    		    <template slot="title">
    		      <i class="el-icon-menu"></i>
    		      <span>{ { item.label}}</span> 
    		     </template>
    		    <el-menu-item-group>
    		      <el-menu-item :index="subItem.path" v-for="(subItem,subIndex) in item.children" :key="subIndex">
    		        { { subItem.label}}
    		      </el-menu-item>
    	        </el-menu-item-group>
          </el-submenu>
    </el-menu>

> 解决某哥们的 :unique-opened=“true” 失效问题  
> 建议一级菜单的话，后台就不要返回 children\[\] 了，直接去掉，不然element 会默认当成二级处理，除非自己把数据处理下，前端处理的话，初始渲染速度可能会受影响。

computed: { 
    		noChildren() { 
    		  return this.asideMenu.filter(item =>
    		    !item.children
    		  )
    		},
    		hasChildren() { 
    		  return this.asideMenu.filter(item =>
    		    item.children
    		  )
    		}
    }

asideMenu: [{ 
       path: '/', //地址
        label: '首页', // 菜单标识
        icon: 's-home', //图标选取的是element图表，然后拼接到上面
      },
      { 
        path: "/video",
        label: '视频管理',
        icon: 'video-play'
      },
      { 
        path: "/user",
        label: '用户管理',
        icon: 'user'
      },
      //二级菜单
      { 
        label: '多级菜单',
        icon: 'user',
        children: [{ 
            path: "/page1",
            label: '页面1',
            icon: 'setting'
          },
          { 
            path: "/page2",
            label: '页面1',
            icon: 'user'
          },
        ]
      },
    ]

created(){ 
    //登录返回 
    // localStorage.setItem('asideMenu', JSON.stringify(返回的数组)) localStorage默认只能存字符串，所以转下
    this.asideMenu = JSON.parse(localStorage.getItem('asideMenu'))  //取出赋值给变量
    // console.log(JSON.parse(localStorage.getItem('asideMenu')))
    
      }

> 借用某哥们的效果图一用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYXdlbnlpMTIzNA_size_16_color_FFFFFF_t_70_pic_center][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYXdlbnlpMTIzNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/6665e04880754bc4a9af925b16f214f3.png