当前位置：首页 > VUE

vue elementui实现菜单

2026-01-08 13:07:48VUE

Vue ElementUI 实现菜单

安装 ElementUI

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

npm install element-ui

在 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 mode="horizontal" default-active="1">
    <el-menu-item index="1">首页</el-menu-item>
    <el-menu-item index="2">产品</el-menu-item>
    <el-menu-item index="3">关于我们</el-menu-item>
  </el-menu>
</template>

嵌套子菜单

使用 el-submenu 实现嵌套菜单：

vue elementui实现菜单

<template>
  <el-menu default-active="1" class="el-menu-vertical">
    <el-submenu index="1">
      <template slot="title">产品</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">关于我们</el-menu-item>
  </el-menu>
</template>

动态生成菜单

通过 v-for 动态生成菜单项：

<template>
  <el-menu default-active="1">
    <el-menu-item 
      v-for="item in menuItems" 
      :key="item.index" 
      :index="item.index"
    >
      {{ item.title }}
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { index: '1', title: '首页' },
        { index: '2', title: '产品' },
        { index: '3', title: '关于我们' }
      ]
    };
  }
};
</script>

路由跳转

结合 Vue Router 实现菜单路由跳转：

vue elementui实现菜单

<template>
  <el-menu 
    router 
    default-active="/" 
    mode="horizontal"
  >
    <el-menu-item index="/">首页</el-menu-item>
    <el-menu-item index="/products">产品</el-menu-item>
  </el-menu>
</template>

自定义菜单样式

通过 CSS 覆盖默认样式或使用 class 自定义菜单外观：

<template>
  <el-menu class="custom-menu">
    <!-- 菜单项 -->
  </el-menu>
</template>

<style>
.custom-menu {
  background-color: #f5f5f5;
}
.custom-menu .el-menu-item {
  color: #333;
}
</style>

菜单事件处理

监听菜单事件，如 select：

<template>
  <el-menu @select="handleMenuSelect">
    <!-- 菜单项 -->
  </el-menu>
</template>

<script>
export default {
  methods: {
    handleMenuSelect(index) {
      console.log('选中菜单:', index);
    }
  }
};
</script>

响应式菜单

结合媒体查询或 JavaScript 实现响应式菜单折叠：

<template>
  <el-menu :collapse="isCollapse">
    <!-- 菜单项 -->
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false
    };
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.isCollapse = window.innerWidth < 768;
    }
  }
};
</script>