官方文档给出了设置默认选中的属性。 Menu Attribute 设置:default-active即可。 可是如果不是从导航切换进页面的,比如从上一个页面里的按钮点击进入该界面,就不知道怎么设置当前选中项了。 那只能自己想办法了。 因为我的项目用了vue-router,页面通过<router-view></router-view>引入组件的,所以我就想,在进入组件...
default-active需要传进去的值就是子导航的index值(也就是其路由值),达到点击路由就可以引起高亮。 1.首先是在index处动态接收api里面的路由名称 2.然后点击事件时用函数获取路由名称 <!-- 二级菜单 --><el-menu-item:index="'/' + items.path"//首先是在index处动态接收api里面的路由名称v-for="items in...
问题是elementUI的el-menu组件提供了一个默认高亮的属性default-active,当页面刷新后default-active的值就会成为默认给的值,解决这个只用取出当前页的路由然后赋值给activeIndex即可,代码如下: <el-menu :default-active="activeIndex" mode="horizontal" :router="true" background-color="#091639" text-color="#ff...
方法/步骤 1 打开一个网页项目，menu的默认索引项与default-active和:index有关。2 :index被赋值为item的path，所以default-active与那个item的path相同，默认索引项就是哪个。3 因为default-active的值为“/”，所以默认索引项是第一个。4 更改default-active的值为“/mall”，默认索引项就会变成第二个。5 再次...
<divclass="my-house"@click="joinChannel(rid)"><iclass="el-icon-house"></i><spanslot="title">我的房间</span></div><!--导航菜单--><el-menu:default-active="defaultActive"active-text-color="#F38621"><el-menu-itemindex="/index"><iclass="el-icon-s-home"></i><spanslot="title...
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...
elementui 选中子页面时,保持左侧导航中父级的激活状态 :default-active=“activeMenu“,如上图,比如说:当前选中的页面为“商户统计”,对应的路由为/total,当点击明细后,打开一个新的页面,路由为/detail,此时“商户统计”会失去选中的状态。现在需求为,打开明细页
使用element NavMenu组件,按照文档的方式,发现需要点击两次才会显示当前点击的所在项。搜索了下资料,发现以下方式可以解决该问题,只需要把:default-active指向$route.path即可。 <el-menu:default-active="$route.path"class="el-menu-demo"mode="horizontal"router="router"text-color="#fff"background-color="#282...
<el-menu class="menu" :default-active="$route.path" @open="handleOpen" @close="handleClose" router > <template v-for="(item, index) in menu"> <!-- 遍历生成菜单的时候根据对象是否有subMenu来判断是否有二级菜单,没有就直接生成一级菜单 --> ...
一个简单的navmenu,当直接写出每个menuitem时,可以自动根据路由选中菜单项,这样当输入http://localhost/#/admin时,可见“系统管理”菜单项激活,用鼠标点击也同样有效。 <el-menu :default-active="$route.path" router> <el-menu-item index="/d">查阅</el-menu-item> ...