vue elementui实现菜单
Vue + Element UI 实现菜单
安装依赖
确保项目已安装 Vue 和 Element UI。若未安装，可通过以下命令安装：
npm install element-ui引入 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="activeIndex"
mode="horizontal"
@select="handleSelect"
>
<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) {
console.log(key);
}
}
};
</script>侧边栏菜单
若需侧边栏菜单，将 mode 改为 vertical：
<el-menu
:default-active="activeIndex"
mode="vertical"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<!-- 菜单项同上 -->
</el-menu>动态生成菜单
通过 v-for 动态渲染菜单数据：
<template>
<el-menu :default-active="activeIndex">
<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 {
activeIndex: '1',
menuItems: [
{ index: '1', title: '首页' },
{ index: '2', title: '产品' },
{ index: '3', title: '关于' }
]
};
}
};
</script>路由集成
结合 Vue Router 实现菜单跳转：
<el-menu
:router="true"
:default-active="$route.path"
>
<el-menu-item index="/home">首页</el-menu-item>
<el-menu-item index="/products">产品</el-menu-item>
</el-menu>样式自定义
通过 CSS 覆盖默认样式：
.el-menu {
border-right: none;
}
.el-menu-item {
font-size: 14px;
}响应式菜单
使用 collapse 属性实现折叠功能：
<el-menu :collapse="isCollapse">
<!-- 菜单项 -->
</el-menu>
<el-button @click="isCollapse = !isCollapse">切换</el-button>注意事项
- 确保
index唯一，避免冲突。 - 侧边栏菜单需设置宽度，折叠时调整为
64px。 - 路由模式需与
vue-router配置一致。
