el-menu-item浮动设置
时间: 2024-10-31 07:07:17 浏览: 11
vue2+el-menu实现路由跳转及当前项的设置方法实例
在Element UI的`el-menu-item`组件中,如果你想实现菜单项的浮动效果,可以使用`index`属性配合`el-submenu`组件来控制它的显示位置。当你将一个`el-menu-item`设置在一个`el-submenu`内,并为其`index`值指定一个较大的数值,比如比其他非子菜单项的大,它就会相对于父菜单项“浮”到顶部。
例如:
```html
<template>
<el-menu default-active="1">
<el-submenu index="10"> <!-- 这里使用较大的index值 -->
<template slot="title">子菜单</template>
<el-menu-item index="1">子菜单项1</el-menu-item>
<el-menu-item index="2">子菜单项2</el-menu-item>
</el-submenu>
<el-menu-item index="2">常规菜单项1</el-menu-item>
<el-menu-item index="3">常规菜单项2</el-menu-item>
</el-menu>
</template>
```
在这种情况下,"子菜单"会先于"常规菜单项"展示出来,形成了浮动的效果。
阅读全文