怎么打开页面el-sub-menu就是展开的
时间: 2023-06-25 08:01:58 浏览: 74
您可以使用 `default-active` 属性来设置 `el-sub-menu` 默认展开的子菜单项。例如:
```html
<template>
<el-menu>
<el-sub-menu default-active="1">
<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 index="3">选项3</el-menu-item>
</el-sub-menu>
<el-sub-menu>
<template slot="title">菜单二</template>
<el-menu-item index="4">选项4</el-menu-item>
<el-menu-item index="5">选项5</el-menu-item>
<el-menu-item index="6">选项6</el-menu-item>
</el-sub-menu>
</el-menu>
</template>
```
在上面的代码中,我设置了第一个 `el-sub-menu` 的 `default-active` 属性为 `"1"`,表示默认展开第一个子菜单项。您可以根据自己的需要设置不同的值来展开不同的子菜单项。
相关问题
el-sub-menu 默认展开
el-sub-menu是Element UI框架中的一个组件,用于在侧边栏中展示子菜单。
el-sub-menu默认是闭合状态,在点击父级菜单时才会展开显示子菜单。但是如果需要el-sub-menu默认展开,可以通过设置default-active属性来实现。
在default-active属性中,可以指定一个子菜单的index值,这个子菜单在页面加载时就会自动展开。例如:
```
<el-menu>
<el-sub-menu default-active="1">
<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 index="3">选项3</el-menu-item>
</el-sub-menu>
</el-menu>
```
在上面的代码中,el-sub-menu组件的default-active属性被设置为"1",表示菜单一的第一个子菜单默认展开。页面加载时,菜单一的选项1会自动展示。
需要注意的是,如果一个el-menu中有多个el-sub-menu,默认展开多个子菜单可能会让页面看起来比较杂乱。因此,只有在必要的情况下才应该使用default-active属性默认展开子菜单。
el-menu加载进入页面后直接展开el-sub-menu并选中里面的el-menu-item
要实现el-menu加载进入页面后直接展开el-sub-menu并选中里面的el-menu-item,可以通过以下步骤来实现:
1. 首先,在el-sub-menu上添加一个属性`default-active`,将其值设置为要展开的el-sub-menu的index或者唯一标识符。例如,如果要展开第一个el-sub-menu,可以将`default-active`设置为`"1"`。
2. 接下来,在el-menu-item上添加一个属性`default-active`,将其值设置为要选中的el-menu-item的index或者唯一标识符。例如,如果要选中第一个el-menu-item,可以将`default-active`设置为`"1"`。
3. 最后,在el-menu上添加一个属性`default-openeds`,将其值设置为要展开的el-sub-menu的index或者唯一标识符的数组。例如,如果要展开第一个和第二个el-sub-menu,可以将`default-openeds`设置为`["1", "2"]`。
这样,当el-menu加载进入页面后,指定的el-sub-menu会展开,并且指定的el-menu-item会被选中。