vue elementui实现菜单
使用 Vue 和 Element UI 实现菜单
Element UI 提供了 el-menu 组件，可以快速构建导航菜单。以下是一个完整的实现示例：
安装 Element UI
确保项目已安装 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)基础菜单实现
在 Vue 组件中使用 el-menu 组件：
<template>
<el-menu
:default-active="activeIndex"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">首页</el-menu-item>
<el-submenu index="2">
<template slot="title">产品</template>
<el-menu-item index="2-1">产品列表</el-menu-item>
<el-menu-item index="2-2">产品分类</el-menu-item>
</el-submenu>
<el-menu-item index="3">关于我们</el-menu-item>
</el-menu>
</template>
<script>
export default {
data() {
return {
activeIndex: '1'
}
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath)
}
}
}
</script>侧边栏菜单
如果需要侧边栏菜单，可以修改 mode 为 vertical：
<el-menu
:default-active="activeIndex"
mode="vertical"
@select="handleSelect">
<!-- 菜单项 -->
</el-menu>动态生成菜单
从接口获取菜单数据时，可以使用 v-for 动态生成：
<el-menu :default-active="activeIndex">
<template v-for="item in menuData">
<el-submenu v-if="item.children" :index="item.id">
<template slot="title">{{item.title}}</template>
<el-menu-item
v-for="child in item.children"
:key="child.id"
:index="child.id">
{{child.title}}
</el-menu-item>
</el-submenu>
<el-menu-item v-else :index="item.id">
{{item.title}}
</el-menu-item>
</template>
</el-menu>菜单路由集成
结合 Vue Router 实现路由跳转：
<el-menu
:router="true"
:default-active="$route.path">
<el-menu-item index="/home">首页</el-menu-item>
<el-menu-item index="/about">关于</el-menu-item>
</el-menu>菜单样式自定义
可以通过 CSS 覆盖默认样式：
.el-menu {
border-right: none;
}
.el-menu-item {
font-size: 16px;
}以上示例展示了使用 Element UI 实现各种菜单场景的方法，包括基础菜单、侧边栏菜单、动态菜单以及与路由的集成。根据实际需求选择合适的实现方式即可。
