在这个例子中,我们定义了一个openedSubmenuIndexes数组,它包含了所有需要默认展开的el-submenu的index值。然后,我们将这个数组绑定到el-menu的default-openeds属性上。 测试并验证所有子菜单是否默认展开: 运行你的Vue应用,并查看菜单是否按预期全部展开。 如果菜单没有全部展开,请检查以下几点: 确保openedSubmenuIndexes...
unique-opened mode="vertical" :collapse-transition="false" @select="handleSelectMenu" > </el-menu> 1. 2. 3. 4. 5. 6. 7. 8. defaultOpenedsArray:[] 1. handleSelectMenu(index) { if (index || index != null) { // 收起展开的子菜单 this.defaultOpenedsArray = []; } }, 1. 2...
第一步:先设置好属性, default-openeds=[],表示打开的子项为空,设置完之后会发现,点击有子项的导航栏打不开了,之后就是设置事件,给导航二设置点击事件, 当用户点击了导航二,触发事件,将defaultOpenedsArray=[],如果点击的是导航一,就将导航一的index,替换defaultOpenedsArray中的第一项, 这样就完成了第一个...
为什么default-openeds 必须写在html上才能起作用,我这样:default-openeds="openNum"后,子菜单点击不会跳转了,而且也 不报错,我这样做的原因是我想在不同的页面让左侧公共导航菜单可以展开的父菜单是不一样的. 我的需求是当页面处于基础表格vue表格组件时 表格是展开的,而当页面处于表单下面的子菜单时 表单就变成...
:default-openeds="openedsArr" text-color="#fff" > <AsideSubMenu:menuData="menuData"></AsideSubMenu> </el-menu> </aside> </template> <script> importAsideSubMenufrom"./AsideSubMenu.vue"; exportdefault{ name:"AsideMenu", components: { ...
el-menu点击两下才收起或展开 default-openeds和default-active尽量不要同时存在,删掉default-openeds即可
第一步：先设置好属性，default-openeds=[],表示打开的子项为空，设置完之后会发现，点击有子项的导航栏打不开了，之后就是设置事件，给导航二设置点击事件，当用户点击了导航二，触发事件，将defaultOpenedsArray=[],如果点击的是导航一，就将导航一的index,替换defaultOpenedsArray中的第一项，这样...
<el-menu :default-active=‘$route.path‘ :router=‘true‘ :unique-opened=‘true‘ :default-openeds="defaultOpeneds"background-color="#bd1e22"text-color="#fff"active-text-color="#ffd04b">//router当导航激活时允许以index作为路由进行页面的跳转,$route.path当前路由对象的路径,字符串,绝对路径/...
<template lang='pug'> section(style='width:210px') el-menu(default-active='menu1' :default-openeds='["submenu1"]' @open='handleOpen' @close='handleClose' @select='handleSelect') el-menu-item(index='menu1') 单项菜单1 el-menu-item(index='menu2') 单项菜单2 el-submenu(index='submen...
:default-openeds="openedsArr" text-color="#fff" > <LeftSubMenu:menuData="menuData"></LeftSubMenu> </el-menu> </template> <scriptsetup> importLeftSubMenufrom"@/components/LeftSubMenu.vue"; import{ computed }from"vue"; import{ useRouter }from"vue-router"; ...