vue+element UI导航栏组件多级菜单侧边栏导航封装功能效果

最新推荐文章于 2024-12-06 10:00:50 发布

原创

最新推荐文章于 2024-12-06 10:00:50 发布 · 2.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #jquery #css3 #html5 #html

本文分享了Vue.js项目中使用Element UI实现的多级菜单侧边栏导航的封装过程，提供了可以直接使用的代码片段。

在开发当中会遇到一些组件的封装，侧边栏导航的封装也是很实用的。下面代码拿走直接用！！！

<template>
      <div>
                                    <el-aside width="200px">
                                            <el-menu
                                            default-active="1"
                                            background-color="#545c64"
                                            text-color="#fff"
                                            :unique-opened="true"
                                            active-text-color="#ffd04b">
                                            
                                            <div v-for="(item,index) in list2" :key="index">
                                                <el-submenu v-if="item.children && item.children.length" :index="item.path" :key="item.path" >
                                                <template slot="title" >
                                                    <img :src="item.icon" alt="">
                                                    <span>{
  
  {item.name}}</span>
                                                </template>