官方文档给出了设置默认选中的属性。 Menu Attribute 设置:default-active即可。 可是如果不是从导航切换进页面的,比如从上一个页面里的按钮点击进入该界面,就不知道怎么设置当前选中项了。 那只能自己想办法了。 因为我的项目用了vue-router,页面通过<router-view></router-view>引入组件的,所以我就想,在进入组件...
对于el-menu组件,默认选中项由default-active属性控制。你可以将default-active绑定到一个变量上,该变量存储了你想要默认选中的菜单项的index值或路由信息。 2. 在el-menu组件中设置该属性以实现默认选中效果 你可以通过数据绑定(例如使用v-bind或简写为:)来设置default-active属性。如果你的菜单项是直接通过静态数据...
问题是elementUI的el-menu组件提供了一个默认高亮的属性default-active,当页面刷新后default-active的值就会成为默认给的值,解决这个只用取出当前页的路由然后赋值给activeIndex即可,代码如下: <el-menu :default-active="activeIndex" mode="horizontal" :router="true" background-color="#091639" text-color="#ff...
由如下代码可知,<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 组件时,可以根据需求配置不同的属性和事件。以下是一些常用的属性和事件: default-active:当前激活菜单的 index。 mode:菜单的模式,包括horizontal和vertical。 @select:菜单项被选中时触发的事件。 可以根据需求配置更多的属性,例如theme、collapse、background-color、text-color和active-text-col...
[Component] [menu] el-menu default-active 属性值双向绑定#17811 butcher-Mopened this issueAug 9, 2024· 4 comments Labels inactive Comments Copy link butcher-McommentedAug 9, 2024 Bug Type:Component Environment Vue Version:3.4.21 Element Plus Version:2.7.7 ...
itemindex="expensive">外卖太贵了</el-menu-item></el-submenu></el-menu></div></div><divclass="right"><router-view></router-view></div></div></template><script>exportdefault{name:"Home",data(){return{// 这里使用当前路由的name名字会更加好一点,就不会写死了,刷新还在的activeIndex:...
activeIndex.value="0"; 解决:nuxt是服务端渲染框架,使用client-only标签使该组件仅在客户端渲染,然后问题就解决了 代码语言:javascript 复制 <client-only><el-menu:default-active="activeIndex"mode="horizontal"active-text-color="#409EFF"><template v-for="(item,index) in menuList"><el-menu-item v...
使用element中的el-menu时候,我们使用路由高亮显示的时候,使用router 模式和default-active 当我们点击左侧菜单栏中的子路由时候,页面路由发生变化,左侧路由的选中状态就会消失,不会仍然保持选中。 我们可以通过route.matched来寻找当前子路由的上机路由, route.matched含义是与给定路由地址匹配的标准化的路由记录数组。就是...