VUE使用el-menu,共二级菜单,四个一级菜单,第一个一级里只有一个二级,其它有二个二级菜单,点击一级展开二级
时间: 2024-09-24 16:12:18 浏览: 38
在Vue.js中,你可以使用Element UI库中的`el-menu`组件创建一个带有二级菜单的导航栏,特别是当每个一级菜单下包含不同数量的二级菜单时。这里是一个简单的示例:
首先,安装Element UI:
```bash
npm install element-ui -S
```
然后,在`.vue`文件中设置`el-menu`结构:
```html
<template>
<div id="app">
<el-menu
:default-active="defaultActive"
router
class="el-menu-demo"
>
<!-- 一级菜单 -->
<el-menu-item index="1">一级菜单一</el-menu-item>
<el-submenu index="2">
<template slot="title">一级菜单二</template>
<el-menu-item index="2-1">二级菜单二-1</el-menu-item>
<el-menu-item index="2-2">二级菜单二-2</el-menu-item>
</el-submenu>
<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-item index="4">
<template slot="title">一级菜单四</template>
<el-menu-item index="4-1">二级菜单四-1</el-menu-item>
</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
defaultActive: '4', // 初始化默认选中二级菜单四
};
},
};
</script>
```
这个例子中,当你点击一级菜单时,对应的二级菜单会被展开。你可以通过修改`data`中的`defaultActive`属性来控制初始显示哪个二级菜单。
阅读全文