element ui 菜单右侧展开_element-ui 设置菜单栏展开的方法
时间: 2023-08-31 07:08:45 浏览: 44
可以通过设置 `default-active` 和 `default-openeds` 属性来实现 Element UI 菜单栏的展开。
`default-active` 属性表示默认选中的菜单项的 index,可以设置为菜单项的 index 值或者是一个包含了菜单项 index 值的数组。
`default-openeds` 属性表示默认展开的子菜单的 index,可以设置为子菜单的 index 值或者是一个包含了子菜单 index 值的数组。
例如,下面的代码演示了如何设置菜单栏中的第一个菜单项和第一个子菜单展开:
```
<template>
<div>
<el-menu :default-active="activeIndex" :default-openeds="[subMenuIndex]">
<el-menu-item index="1">菜单项1</el-menu-item>
<el-submenu index="2">
<template slot="title">菜单项2</template>
<el-menu-item index="2-1">子菜单项1</el-menu-item>
<el-menu-item index="2-2">子菜单项2</el-menu-item>
</el-submenu>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
activeIndex: '1',
subMenuIndex: '2'
}
}
}
</script>
```
在上面的代码中,我们在 `data` 中设置了 `activeIndex` 和 `subMenuIndex` 的初始值,然后将它们分别绑定到 `default-active` 和 `default-openeds` 属性上。这样页面加载时,菜单栏就会默认选中第一个菜单项并展开第一个子菜单。