vue后台管理侧边栏菜单布局

最新推荐文章于 2025-04-22 23:50:29 发布

snail-T

最新推荐文章于 2025-04-22 23:50:29 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/webDevelopSnail/article/details/109608459

本文介绍了如何在Vue后台管理系统中使用Element UI的NavMenu组件来创建三级菜单。主要内容包括通过调整菜单项模板的i标签类名来定制菜单图标，以及在数据中添加iconsObj来定义不同菜单项的图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三级菜单

1.使用Element组件中NavMenu 导航菜单

<!-- 侧边栏 -->
      <el-aside width="212px">
        <!-- 侧边栏菜单 -->
        <el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#ffd04b"
          :default-active="this.$route.path"
          router
          unique-opened
        >
          <!-- 一级菜单 -->
          <!-- // :index="item.id +''"(由固定转活动的值，每个el-submenu等级的菜单有一个独有index值，作为使用菜单方法的一个必要搭配，这里绑定当前索引) -->
          <el-submenu :index="item.url" v-for="item in munuList" :key="item.id">
            <!-- 一级菜单模板 -->
            <template slot="title">
              <!-- 图标 -->
              <i