可以在el-sub-menu组件中通过slot来自定义submenu-item的内容,然后在该slot中嵌套一个div,将背景图片设置给该div。同时,可以通过给submenu-item设置一个绝对定位,将其置于div元素的上层,从而实现展开时不改变el-menu-item的背景。 具体实现过程如下: <template> <el-menu> <el-submenu> <template slot="title">...
下面是一个示例代码片段,展示了如何实现 el-menu 的全部展开: vue <template> <el-menu :default-openeds="allMenuItems" router mode="horizontal"> <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index="2"> <template slot="title">管...
问题一 el-submenu不加index的报错图 细节:el-submenu必须要加index 原因是index的属性值是定义组件时必须传入的。同时组件的@select也需要用到这个index 问题二 点击只有一级菜单时不自动合上其他已经展开的菜单 效果图 想要解决这个问题,就要用到组件提供的另外一个事件,@select事件,代码图如下 附带打印select回调函...
问题一 el-submenu不加index的报错图 原因是index的属性值是定义组件时必须传入的。同时组件的@select也需要用到这个index 问题二 点击只有一级菜单时不自动合上其他已经展开的菜单 效果图如下 想要解决这个问题,就要用到组件提供的另外一个事件,@select事件,代码图如下 附带打印select回调函数接收的参数...
问题一 el-submenu不加index的报错图 原因是index的属性值是定义组件时必须传入的。同时组件的@select也需要用到这个index 问题二 点击只有一级菜单时不自动合上其他已经展开的菜单 效果图如下 想要解决这个问题,就要用到组件提供的另外一个事件,@select事件,代码图如下 ...
问题一 el-submenu不加index的报错图 原因是index的属性值是定义组件时必须传入的。同时组件的@select也需要用到这个index 问题二 点击只有一级菜单时不自动合上其他已经展开的菜单 效果图如下 想要解决这个问题,就要用到组件提供的另外一个事件,@select事件,代码图如下 ...
el-submenu是el-menu的子组件,用于实现多级菜单的展示。在el-submenu中,可以通过设置label属性来定义子菜单的标题,通过设置index属性来定义子菜单的唯一标识。同时,el-submenu还提供了一个可以放置子菜单项的插槽,我们可以在插槽中自定义子菜单的内容。 为了实现最后一节不展开的效果,我们可以通过判断当前子菜单的index...
我这里使用Vue 3.2.41 + element-plus 2.2.26,首次显示不卡,但是点击按钮,切换左侧菜单的收起展开就很卡,要10多秒钟才能出来(我的菜单树形结构有4层,数量非常多) 根据@kooriookami说的与Chromium内核有关,我用操作系统自带的Edge浏览器,展开折叠不卡。用360浏览器(内核版本86的)也不会卡,用QQ浏览器(内核版本94...
在el-submenu的最后一节不展开的情况下,我们来探讨一下这种设计的原因和实际应用场景。 为什么要设计el-submenu最后一节不展开呢?这是因为在一些情况下,最后一级菜单可能是叶子节点,没有下一级子菜单,展开它没有意义。例如,在一个通用的网站导航菜单中,最后一级菜单可能是具体的页面链接,而不是下一级菜单。如果...
</el-submenu> <el-menu-item index="3">选项三</el-menu-item> </el-menu> </template> ``` 在上面的示例中,我们使用了 el-submenu 组件来创建了一个嵌套的菜单项,用户可以通过鼠标悬停或点击来展开或收起子菜单,这样就可以实现一个嵌套菜单的效果。 3.2 折叠菜单 el-menu 还支持折叠菜单的功能,可以...