查看循环菜单的数据menuList,发现只有叶子菜单的数据才配置了url,其它级别的则为空数据,所以就导致了配置:index="menu.url"时出现点击一个全部展开的情况。 第五步、解决方法 第一种,使用第二步的写法,后台数据库的数据url字段不为null且值不相同 第二种,修改代码el-sub-menu中的:index值为menu.index,el-menu...
1,找到所有打开的菜单(通过‘el-menu--vertical’找到) 2,排除掉不是div的(会找到一些其他叫这个class的,但是不是我们要的菜单元素) 3,如果我们点击页面其他部位(非打开的菜单),就关闭菜单 listenerElSubment() {document.body.addEventListener('click',function(e) {//1,找到所有打开的菜单(通过‘el-menu--...
原因是index的属性值是定义组件时必须传入的。同时组件的@select也需要用到这个index 问题二 点击只有一级菜单时不自动合上其他已经展开的菜单 效果图如下 想要解决这个问题,就要用到组件提供的另外一个事件,@select事件,代码图如下 附带打印select回调函数接收的参数...
情况一:单个菜单页面刷新导航失去高亮;(如下图这种菜单类型) 问题是elementUI的el-menu组件提供了一个默认高亮的属性default-active,当页面刷新后default-active的值就会成为默认给的值,解决这个只用取出当前页的路由然后赋值给activeIndex即可,代码如下: <el-menu :default-active="activeIndex" mode="horizontal" :ro...
[element] el-menu 收起展开的子菜单 <el-menu :default-openeds="defaultOpenedsArray" unique-opened mode="vertical" :collapse-transition="false" @select="handleSelectMenu" > </el-menu> 1. 2. 3. 4. 5. 6. 7. 8. defaultOpenedsArray:[]...
7 因为还有子路由的菜单需要使用到el-submenu标签，它封装了展开/收起箭头。所以我们先从路由中提取出没有子路由的对象，直接通过el-menu-item标签来实现即可。而没有子菜单的菜单我们希望点击时能只能跳转路由，所以我们可以在el-menu-item外包裹个router-link标签，通过to属性来指向对应的路由。8 接着我们继续将...
el-menu折叠后设置子菜单展开方式这样做。1、打开需要操作的EXCEL表格，选中需要设置数据有效性的单元格中，在数据工具栏中找到并点击数据有效性。2、在允许下面的选项菜单中选择序列，然后在来源输入框中输入需要作为数据的文本内容，使用英文逗号分隔开各个选项，并点击下面的确定按钮即可。3、返回EXCEL表格...
关于el-menu 多级菜单,常见的问题可能包括: 如何动态更新菜单数据? 可以通过 Vue 的响应式系统来更新 menuData 数组,el-menu 会自动重新渲染以反映更改。 如何处理深层嵌套的菜单项? 使用递归组件是解决深层嵌套菜单项的有效方法。如上例所示,通过递归调用 MenuItem 组件,可以处理任意层级的菜单嵌套。 如何自定义菜单...
第一步：先设置好属性，default-openeds=[],表示打开的子项为空，设置完之后会发现，点击有子项的导航栏打不开了，之后就是设置事件，给导航二设置点击事件，当用户点击了导航二，触发事件，将defaultOpenedsArray=[],如果点击的是导航一，就将导航一的index,替换defaultOpenedsArray中的第一项，这样...
}.el-sub-menu .el-sub-menu__title:hover{color:rgba(72, 118, 255, 1) !important;background-color:transparent !important;border-radius:8px; }.el-sub-menu .el-menu-item{font-size:14px;height:40px;&:hover { color: rgba(72, 118, 255, 1);background-color:rgba(234, 239, 255, 1...