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

最新推荐文章于 2025-10-05 07:59:34 发布

原创

最新推荐文章于 2025-10-05 07:59:34 发布 · 2.2k 阅读

4 ·

CC 4.0 BY-SA版权

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

三级菜单

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 :class