</el-menu> import {useRoute,onBeforeRouteUpdate} from 'vue-router'const route=useRoute(); onMounted(()=>{ activeMenu.value= route.matched[2].path//数组的下标需要根据自己的路由的等级来判断}) onBeforeRouteUpdate((routeInfo)=>{ activeMenu.value= routeInfo.matched[2].path })...
一、菜单项激活状态保持 二、实现页面的路由刷新(局部刷新)
在Element Plus的el-menu组件中,要实现菜单项激活后切换图标的功能,你可以按照以下步骤进行: 识别el-menu激活事件: el-menu组件提供了@select事件,当点击菜单项时会触发该事件。你可以通过监听这个事件来判断哪个菜单项被激活。 设计切换后的图标: 你需要准备两种图标,一种是默认状态,另一种是激活状态。这些图标可以...
由如下代码可知,<el-menu-item :index="child.path"中path表示点击时激活的路由,而我们现在做的是要同步以下路由,我们要改变的是<el-menu>的:default-active="activePath"属性 <el-menu:uniqueOpened="true"class="el-menu-vertical-demo"text-color="#fff"background-color="#272727"active-text-color="#ffd...
在el-menu组件里有这样一个属性,default-active用来表示当前激活菜单的 index 1、如果给default-active设置一个默认值,那么刷新页面时,会出现一个问题,即路由地址和菜单对应的index是不一致的。 <el-menu routerdefault-active="/"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"> ...
</el-menu> </template> <script> export default { data() { return { activeIndex: '/' }; }, methods: { handleMenuSelect(index) { this.activeIndex = index; } } }; </script> ``` 2.手动激活: 你也可以手动设置菜单项的激活状态,通过绑定`:default-active`属性或者通过设置`is-active`属性...
bug现象:变更这个值发现菜单无法激活 代码语言:javascript 复制 activeIndex.value="0"; 解决:nuxt是服务端渲染框架,使用client-only标签使该组件仅在客户端渲染,然后问题就解决了 代码语言:javascript 复制 <client-only><el-menu:default-active="activeIndex"mode="horizontal"active-text-color="#409EFF"><templa...
Element-UI el-table行编辑状态无法切换是为什么呢? Element-UI el-table 表格一个功能是单击某行,这一行的状态变为可以编辑,用的v-if进行的切换,但是在旧版分支这个功能是好的,新版分支就没反应了,代码如下: 1 回答5.3k 阅读✓ 已解决 相似问题 el-menu 在更新 router 的 params 后丢失高亮的问题 1 回...
activeMenu: '' // 初始化为空字符串或默认激活的菜单项路径 }), actions: { setActiveMenu(path: string) { this.activeMenu = path; } }}); ### 2. 修改 `permission.ts` 文件 在`src\permission.ts` 中: import { createRouter, createWebHistory } from 'vue-router';import { useMenuStore...