针对你提出的问题“el-submenu默认不展开”,以下是一些可能的解决方案和分析: 确认el-submenu组件的当前状态: 首先,确保你的el-submenu组件是正确嵌套在el-menu组件内部的。这是使用Element UI菜单组件的基本要求。 检查el-submenu组件是否有default-open属性: 实际上,Element UI的el-submenu组件并没有default-open属性...
为什么要设计el-submenu最后一节不展开呢?这是因为在一些情况下,最后一级菜单可能是叶子节点,没有下一级子菜单,展开它没有意义。例如,在一个通用的网站导航菜单中,最后一级菜单可能是具体的页面链接,而不是下一级菜单。如果将最后一级菜单也展开,会给用户带来混淆和困惑,因为他们无法再继续选择下一级菜单。因此,...
el-submenu是el-menu的子组件,用于实现多级菜单的展示。在el-submenu中,可以通过设置label属性来定义子菜单的标题,通过设置index属性来定义子菜单的唯一标识。同时,el-submenu还提供了一个可以放置子菜单项的插槽,我们可以在插槽中自定义子菜单的内容。 为了实现最后一节不展开的效果,我们可以通过判断当前子菜单的index...
第一步、创建SubMenu <template> <template v-for="menu in this.menuData" :key="menu.url"> <el-sub-menu v-if="menu.children" :index="menu.url" :key="menu.url" > <template #title> <el-icon><component :is="menu.icon"></component></el-icon>{{menu.name}} </template> </el-s...
官网的折叠展开图标 要实现的: 思路: 1、首先替换折叠展开图标 2、使用right复制,把图标移动到需要展示的地方 .el-submenu__title { .el-submenu__icon-arrow { right: 220px; margin-top: -5px; } .el-icon-a
问题一 el-submenu不加index的报错图 细节:el-submenu必须要加index 原因是index的属性值是定义组件时必须传入的。同时组件的@select也需要用到这个index 问题二 点击只有一级菜单时不自动合上其他已经展开的菜单 效果图 想要解决这个问题,就要用到组件提供的另外一个事件,@select事件,代码图如下 ...
我这里使用Vue 3.2.41 + element-plus 2.2.26,首次显示不卡,但是点击按钮,切换左侧菜单的收起展开就很卡,要10多秒钟才能出来(我的菜单树形结构有4层,数量非常多) 根据@kooriookami说的与Chromium内核有关,我用操作系统自带的Edge浏览器,展开折叠不卡。用360浏览器(内核版本86的)也不会卡,用QQ浏览器(内核版本94...
</el-submenu> </el-menu> 在上面的示例中,我们创建了一个水平模式的菜单,并设置了默认选中的菜单项。同时,我们开启了路由模式,这样当点击菜单项时,会自动触发路由跳转。 需要注意的是,在使用el-menu的过程中,我们需要和VueRouter进行配合使用,以实现页面间的跳转和参数传递。当然,我们还需要配置相应的路由规则。
在“踩坑”过程中，发现第一个问题：当使用el-submenu时，如果未添加“index”属性，会出现报错“Missing required prop: 'index'”。这是因为“index”属性在组件初始化时必须提供，且在组件内部的逻辑中，如@select事件中，会使用到这个属性。第二个问题出现在点击一级菜单时，其他已经展开的菜单并未...