vue2+elementui 顶部一级菜单 左侧二三级菜单
时间: 2024-09-24 19:06:22 浏览: 10
在Vue 2框架结合Element UI的情况下,构建一个常见的网站布局通常涉及到使用`el-menu`(顶级菜单)和嵌套的`el-submenu`(二级、三级菜单)。这里是一个简化的步骤描述:
1. 安装依赖:
首先确保已安装 Vue 和 Element UI。如果尚未安装,可以使用npm或yarn进行安装:
```bash
npm install vue element-ui
```
2. 引入组件:
在你的项目中引入需要的Element UI菜单组件:
```javascript
import { ElMenu, ElSubmenu, ElMenuItem } from 'element-ui';
```
3. 创建组件结构:
设计一个Vue组件,包含顶部一级菜单和左侧二级/三级菜单。例如:
```html
<template>
<div class="layout">
<!-- 顶部一级菜单 -->
<ElMenu default-active="1" class="top-menu">
<ElMenuItem index="1">首页</ElMenuItem>
<ElMenuItem index="2">分类一</ElSubmenu> <!-- 这里用el-submenu作为二级菜单 -->
<ElMenuItem index="3">分类二</ElSubmenu>
<!-- 添加更多一级菜单项... -->
</ElMenu>
<!-- 左侧二级/三级菜单 -->
<div class="sidebar">
<ElSubmenu :index="0">
<span slot="title">一级分类</span>
<ElMenuItem index="1-1">二级分类A</ElMenuItem>
<ElSubmenu index="1-2">
<span slot="title">二级分类B</span>
<ElMenuItem index="2-1">三级分类1</ElMenuItem>
<ElMenuItem index="2-2">三级分类2</ElMenuItem>
</ElSubmenu>
</ElSubmenu>
</div>
</div>
</template>
```
4. 数据绑定和管理:
在组件的data()函数中,你可以设置菜单数据,并通过`:index`属性绑定到实际的路径或路由地址。
5. 样式调整:
根据项目的样式需求对 `.top-menu` 和 `.sidebar` 类进行样式定制,如定位、宽度等。