el-menu 展开控制主要通过 default-openeds 属性来实现。 在Element UI 中,el-menu 组件的展开控制可以通过设置 default-openeds 属性来实现。这个属性是一个数组,包含了需要默认展开的子菜单的 index 值。 基本用法 定义子菜单的 index 属性: 每个el-submenu 必须设置唯一且可识别的 index 值(
在MenuCom中,我们首先使用el-menu来渲染菜单,通过default-active属性来设置默认选中的菜单项,通过unique-opened属性来设置只展开一个子菜单。 在MenuCom中,我们使用v-for来遍历菜单数据,通过v-if和v-else来判断菜单项是菜单还是子菜单。j接下来,我们使用el-submenu来生成子菜单,通过template slot="title"来设置子菜...
在el-submenu的最后一节不展开的情况下,我们来探讨一下这种设计的原因和实际应用场景。 为什么要设计el-submenu最后一节不展开呢?这是因为在一些情况下,最后一级菜单可能是叶子节点,没有下一级子菜单,展开它没有意义。例如,在一个通用的网站导航菜单中,最后一级菜单可能是具体的页面链接,而不是下一级菜单。如果...
el-submenu是el-menu的子组件,用于实现多级菜单的展示。在el-submenu中,可以通过设置label属性来定义子菜单的标题,通过设置index属性来定义子菜单的唯一标识。同时,el-submenu还提供了一个可以放置子菜单项的插槽,我们可以在插槽中自定义子菜单的内容。 为了实现最后一节不展开的效果,我们可以通过判断当前子菜单的index...
问题一 el-submenu不加index的报错图 原因是index的属性值是定义组件时必须传入的。同时组件的@select也需要用到这个index 问题二 点击只有一级菜单时不自动合上其他已经展开的菜单 效果图如下 想要解决这个问题,就要用到组件提供的另外一个事件,@select事件,代码图如下 ...
问题一 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> <el-menu-item index="3">选项三</el-menu-item> </el-menu> </template> ``` 在上面的示例中,我们使用了 el-submenu 组件来创建了一个嵌套的菜单项,用户可以通过鼠标悬停或点击来展开或收起子菜单,这样就可以实现一个嵌套菜单的效果。 3.2 折叠菜单 el-menu 还支持折叠菜单的功能,可以...
问题一 el-submenu不加index的报错图 原因是index的属性值是定义组件时必须传入的。同时组件的@select也需要用到这个index 问题二 点击只有一级菜单时不自动合上其他已经展开的菜单 效果图如下 想要解决这个问题,就要用到组件提供的另外一个事件,@select事件,代码图如下 ...