当前位置：首页 > VUE

vue elementui实现菜单

2026-01-14 22:56:51VUE

使用 Vue 和 Element UI 实现菜单

Element UI 提供了 el-menu 组件，可以轻松实现导航菜单功能。以下是一个完整的实现示例：

安装 Element UI

确保项目已安装 Vue 和 Element UI：

npm install element-ui

在 main.js 中引入 Element UI：

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-menu-item index="1">
      <i class="el-icon-menu"></i>
      <span>首页</span>
    </el-menu-item>
    <el-menu-item index="2">
      <i class="el-icon-document"></i>
      <span>文档</span>
    </el-menu-item>
    <el-menu-item index="3">
      <i class="el-icon-setting"></i>
      <span>设置</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: 'BasicMenu'
}
</script>

<style>
.el-menu-vertical-demo {
  width: 200px;
  min-height: 100vh;
}
</style>

嵌套子菜单

使用 el-submenu 实现多级菜单：

<template>
  <el-menu
    default-active="1-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-submenu index="2">
      <template slot="title">
        <i class="el-icon-menu"></i>
        <span>导航二</span>
      </template>
      <el-menu-item index="2-1">选项1</el-menu-item>
      <el-menu-item index="2-2">选项2</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

动态生成菜单

通过数据驱动方式动态生成菜单：

<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical-demo"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    @select="handleSelect">
    <template v-for="item in menuData">
      <el-submenu v-if="item.children" :index="item.index" :key="item.index">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{item.title}}</span>
        </template>
        <el-menu-item 
          v-for="child in item.children" 
          :index="child.index" 
          :key="child.index">
          {{child.title}}
        </el-menu-item>
      </el-submenu>
      <el-menu-item v-else :index="item.index" :key="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-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'
        }
      ]
    }
  },
  methods: {
    handleSelect(index) {
      console.log('选中菜单:', index)
    }
  }
}
</script>

水平菜单

使用 mode 属性创建水平菜单：

<template>
  <el-menu
    mode="horizontal"
    default-active="1"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-menu-item index="1">首页</el-menu-item>
    <el-menu-item index="2">产品</el-menu-item>
    <el-submenu index="3">
      <template slot="title">服务</template>
      <el-menu-item index="3-1">选项1</el-menu-item>
      <el-menu-item index="3-2">选项2</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

路由集成

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

<template>
  <el-menu
    router
    :default-active="$route.path"
    class="el-menu-vertical-demo"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-menu-item index="/home">
      <i class="el-icon-menu"></i>
      <span>首页</span>
    </el-menu-item>
    <el-menu-item index="/about">
      <i class="el-icon-document"></i>
      <span>关于</span>
    </el-menu-item>
  </el-menu>
</template>

菜单折叠

实现可折叠的侧边栏菜单：

<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-item index="1">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">导航</span>
        </template>
        <el-menu-item index="2-1">选项1</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

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

以上示例展示了 Vue 和 Element UI 实现各种菜单功能的方法，包括基础菜单、多级菜单、动态菜单、水平菜单、路由集成和折叠菜单等功能。

vue elementui实现菜单