当前位置：首页 > VUE

vue elementui实现菜单

2026-02-11 01:56:41VUE

Vue + ElementUI 实现菜单

安装依赖

确保项目已安装 Vue 和 ElementUI。若未安装，可通过以下命令安装：

npm install element-ui

引入 ElementUI

在 main.js 中全局引入 ElementUI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

基础菜单结构

使用 el-menu 组件实现导航菜单。以下是一个侧边栏菜单的示例：

<template>
  <el-menu
    default-active="1"
    class="el-menu-vertical-demo"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>导航一</span>
      </template>
      <el-menu-item index="1-1">选项1</el-menu-item>
      <el-menu-item index="1-2">选项2</el-menu-item>
    </el-submenu>
    <el-menu-item index="2">
      <i class="el-icon-menu"></i>
      <span>导航二</span>
    </el-menu-item>
  </el-menu>
</template>

动态生成菜单

通过 v-for 动态渲染菜单数据：

<template>
  <el-menu
    :default-active="activeIndex"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <template v-for="item in menuData">
      <el-submenu v-if="item.children" :index="item.index">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item
          v-for="child in item.children"
          :key="child.index"
          :index="child.index">
          {{ child.title }}
        </el-menu-item>
      </el-submenu>
      <el-menu-item v-else :index="item.index">
        <i :class="item.icon"></i>
        <span>{{ item.title }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      menuData: [
        {
          index: '1',
          title: '导航一',
          icon: 'el-icon-location',
          children: [
            { index: '1-1', title: '选项1' },
            { index: '1-2', title: '选项2' }
          ]
        },
        {
          index: '2',
          title: '导航二',
          icon: 'el-icon-menu'
        }
      ]
    };
  }
};
</script>

路由跳转

结合 Vue Router 实现菜单跳转：

在 el-menu 上添加 router 属性：

<el-menu router :default-active="$route.path">

为菜单项设置 index 为路由路径：

menuData: [
{
 index: '/page1',
 title: '页面一',
 icon: 'el-icon-document'
}
]

菜单样式调整

通过 CSS 自定义菜单样式：

.el-menu-vertical-demo {
  width: 200px;
  min-height: 100vh;
}
.el-menu {
  border-right: none;
}

响应式折叠菜单

使用 collapse 属性实现折叠功能：

vue elementui实现菜单

<template>
  <div>
    <el-button @click="isCollapse = !isCollapse">切换折叠</el-button>
    <el-menu
      :collapse="isCollapse"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <!-- 菜单内容 -->
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false
    };
  }
};
</script>