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

最新推荐文章于 2026-04-17 02:11:23 发布

原创最新推荐文章于 2026-04-17 02:11:23 发布 · 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="iconsObj[item.id]"></i>
              <!-- 文本 -->
              <span>{{ item.name }}</span>
            </template>
            <!-- 二级子菜单 -->
            <el-menu-item
              :index="subItem.url"
              v-for="subItem in item.child"
              :key="subItem.id"
            >
              <!-- 二级菜单模板 -->
              <template slot="title">
                <!-- 文本 -->
                <span>{{ subItem.name }}</span>
              </template>
              <!-- 三级子菜单 -->
              <el-menu-item
                :index="thirdItem.url"
                v-for="thirdItem in subItem.child"
                :key="thirdItem.id"
              >
                <!-- 三级菜单文字 -->
                <template>
                  <!-- 文字 -->
                  <span>{{ thirdItem.name }}</span>
                </template>
              </el-menu-item>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

2.补充内容：通过更改菜单项模板中i标签的类名，可以将左侧菜单栏的图标进行设置，在数据添加一个iconsObj,并定义菜单栏数据

 data() {
    return {
      // 一级菜单动态图标
      iconsObj: {
        1: 'el-icon-s-data',
        2: 'el-icon-phone-outline',
        3: 'el-icon-s-goods',
      },
      // 左侧菜单数据
      munuList: [
        {
          id: 1,
          name: '我是一级菜单',
          url: '/userData',
          child: [
            {
              id: 10,
              name: '我是二级菜单',
              url: '/home'
            }
          ]
        },
        {
          id: 2,
          name: '我是一级菜单',
          url: '/manage',
          child: [
            {
              id: 20,
              name: '我是二级菜单',
              url: '/manage/jobNum',
              child: [
                {
                  id: 201,
                  name: '我是三级菜单',
                  url: '/manage/jobNum/add'
                }
              ]
            },
            {
              id: 21,
              name: '我是二级菜单',
              url: '/manage/role',
              child: [
                {
                  id: 211,
                  name: '我是三级菜单',
                  url: '/manage/role/add'
                }
              ]
            },
            {
              id: 22,
              name: '我是二级菜单',
              url: '/manage/setting'
            }
          ]
        },
        {
          id: 3,
          name: '我是一级菜单小三',
          url: '/rule',
          child: [
            {
              id: 30,
              name: '我是二级菜单小五',
              url: '/rule/reception'
            }
          ]
        },