element ui 菜单右侧展开_element-ui 设置菜单栏展开的方法
时间: 2023-06-28 10:04:07 浏览: 114
在 Element UI 中,可以通过 `el-menu` 组件的 `default-active` 和 `default-openeds` 属性来设置菜单栏的展开状态。
其中,`default-active` 是用来设置菜单栏默认选中的项,而 `default-openeds` 是用来设置菜单栏默认展开的项,它是一个数组,数组中的每个元素都是菜单栏的索引值,表示要展开的菜单项的索引。
举个例子,如果我们要让菜单栏的第一项默认展开,并且第二、三项也展开,可以这样写:
```html
<el-menu
:default-active="activeIndex"
:default-openeds="[0, 1, 2]"
>
<el-submenu index="0">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1">选项1</el-menu-item>
<el-menu-item index="2">选项2</el-menu-item>
</el-menu-item-group>
<el-submenu index="3">
<template slot="title">选项3</template>
<el-menu-item index="4">选项4</el-menu-item>
<el-menu-item index="5">选项5</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="6">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="7">
<i class="el-icon-setting"></i>
<span slot="title">导航三</span>
</el-menu-item>
</el-menu>
```
在上面的代码中,我们通过 `default-openeds` 属性将第一、二、三项设置为展开状态。注意,这里的索引值是从 0 开始的,所以第一项的索引值是 0,第二项的索引值是 1,以此类推。