在router.js里设置路由时,给相同导航高亮的路由设置相同的name属性,如图: 然后在menu组件上设置default-active的值为:$route.name,这样就可以实现刷新时导航栏选中当前页的问题。最后设置el-menu-item的index属性为router.js文件里跳转路由的name值,route属性为:路由的path,如图: 通过这样设置,就可以实现刷新页面时,...
<el-menu-item index="/device_new/">设备管理</el-menu-item> <el-menu-item index="/monitor/">状态监测</el-menu-item> <el-menu-item index="/fault_new/">故障诊断</el-menu-item> <el-menu-item index="/trend_new/">趋势分析</el-menu-item> <el-menu-item index="/spectrogram/">谱...
--递归嵌套--><SubMenu:children="item.children"></SubMenu></el-sub-menu><el-menu-item:index="item.name":route="item.path"v-else-if="!item.meta.hidden"><el-icon><component:is="item.icon":class="[item.icon, 'iconfont']"/></el-icon><template#title><span>{{ i18n.t(item.name) ...
el-menu-item 就是普通的菜单项 el-submenu 是菜单项里还有子菜单 el-menu-item-group 是菜单项组,就是好几个菜单项有个标题 网络异常,图片无法展示 | index的妙用 建议将每个el-menu-item和el-submenu上加上index的属性。 好处以下: 选中的时候,有高亮的状态 方便设置默认选中的菜单,可以default-active=...
问题1:刷新页面后高亮部分无法保持当前选择状态。 解决方案:可以使用 localStorage 或sessionStorage 来持久化储存当前选择的菜单项,然后在页面加载时从存储中读取该值并设置给 activeIndex。 问题2:使用 vue-router 时,菜单选中状态与路由状态不同步。 解决方案:启用 el-menu 的router 属性,这样 el-menu 会根据当前路...
关于Element-UI中el-menu，则给其他标签添加点击事件改变 default-active 的值无法使el-menu-item高亮显示的问题 因为这是element中两个不相关联的组件，无法通过组件内的方法去实现这个需求。我采用vuex状态机来实现。为三个导航栏绑定点击事件，点击的时候去改变状态机里的state数据。然后再相应的页面里...
默认状态:展示菜单aaaa,和当前路由匹配,高亮显示。 需求 点击2切换路由参数,更新菜单里的url,并且菜单aaaa仍应高亮显示。 实现 菜单生成代码: <el-menuunique-opened:default-active="activeIndex"router><el-menu-itemv-for="item in menus":key="item.url":index="item.url">{{item.name}}</el-menu-item...
点击其他地方,然后观察之前点击的el-menu-item的背景颜色; 再次点击之前的el-menu-item,观察el-menu-item的背景颜色; 然后将指针移动到el-sub-menu上,但不点击,使下拉栏自动弹出; 点击下拉栏中的el-menu-item,然后观察单独的el-menu-item的背景颜色。
el-menu-item Reproduction Link Element Plus Playground Steps to reproduce 1.在el-menu组件上方,添加一个具有高度的div 2.style中加入重置样式body{margin:0} What is Expected? 背景: 由于实际项目中, 需要在el-menu上面加入一个具有高度的div。 且body的重置样式,也是必须的。 期望: el-sub-menu的popover...
el-menu 选择子菜单 父菜单没高亮 /* 子菜单active */ .page-sidebar .el-menu-item.is-active .iconfont-cahnge { color: #cc0000 !important; } /* 主菜单和子菜单同active */ .page-sidebar .el-submenu.is-active>.el-submenu__title { color: #cc0000 !