elementplus左侧菜单
时间: 2025-01-04 17:35:48 浏览: 55
### 创建左侧导航菜单
在 Element Plus 中创建左侧导航菜单可以通过 `el-menu` 组件来完成。此组件允许定义多个子项,这些子项可以是简单的链接或是带有图标的复杂项目。
对于基本的左侧菜单配置如下所示:
```html
<template>
<div class="container">
<!-- 左侧菜单 -->
<el-menu default-active="1" class="left-menu" @select="handleSelect">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title"><span>我的工作台</span></template>
<el-menu-item-group title="分组一">
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
<!-- 右侧展示区域 -->
<router-view />
</div>
</template>
```
为了使某个菜单项处于激活状态,需利用`:default-active`属性绑定到一个变量上,并确保该路径与路由地址匹配[^3]。
当涉及到多级嵌套菜单时,则可借助于 `el-submenu` 和 `el-menu-item-group` 来构建层次结构。同时,通过条件渲染不同的样式类名,能够实现更灵活的设计效果[^2]。
此外,在实际应用中通常会结合 Vue Router 实现页面跳转功能,即点击左侧菜单中的某一项后,对应的视图会在 `<router-view>` 容器内显示出来[^1]。
阅读全文
相关推荐


















