对于el-menu组件,默认选中项由default-active属性控制。你可以将default-active绑定到一个变量上,该变量存储了你想要默认选中的菜单项的index值或路由信息。 2. 在el-menu组件中设置该属性以实现默认选中效果 你可以通过数据绑定(例如使用v-bind或简写为:)来设置default-active属性。如果你的菜单项是直接通过静态数据...
官方文档给出了设置默认选中的属性。 Menu Attribute 设置:default-active即可。 可是如果不是从导航切换进页面的,比如从上一个页面里的按钮点击进入该界面,就不知道怎么设置当前选中项了。 那只能自己想办法了。 因为我的项目用了vue-router,页面通过<router-view></router-view>引入组件的,所以我就想,在进入组件...
active-text-color 是选中的文本颜色 这句话设置选中的背景颜色 .el-menu-item.is-active { background-color: #ccff00!important; } <template><divclass="common-layout"><!--全屏的关键:height:100vh--><el-containerstyle=" height: 100vh"><el-asidestyle="background-color: #191970;"width="200p...
4,在components--common--side_nav.vue下(导航所在的组件) <el-menu:default-active="navselected":active="navselected"@select="selectItems"class="el-menu-admin"router> 添加变量和改变方法 exportdefault{ components:{'el-menu':Menu,'el-submenu':Submenu,'el-menu-item':MenuItem,'el-menu-item-grou...
(1)、<el-menu> 设置属性 :default-active="activeIndex" (2)、watch方法检测路由变化 (3)、created生命周期设置路由 具体代码如下: <template> <div id="app"> <el-menu :default-active="activeIndex" background-color="#545c64" text-color="#fff" ...
</el-menu-item> </el-menu> <style lang="scss" scoped> .logo { height: 100%; float: left; padding: 10px 20px; } .topMenu { float: left; } .topActions { float: right; } .el-menu--horizontal > .el-menu-item { height: 88px; ...
在使用element中的menu组件时,根据官方文档,可以设置给el-menu设置router属性为:true,给el-menu-item设置index的值为路径,就可以实现点击导航跳转到指定路由。 这样做虽然能实现跳转,但是,若刷新浏览器,则导航会跳转到默认的选中项,而不是我们离开时的导航。
这篇文章给大家分享的是有关如何使用element-ui的el-menu导航选中后刷新页面保持当前选中状态的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 具体代码如下所示: <el-menu :default-active=‘$route.path‘ :router=‘true‘ :unique-opened=‘true‘ :default-openeds="defaultOpened...
点击的时候不会选中菜单,页面不跳转。但是访问其他子页面后,通过浏览器回退按钮退回到index页面时,莫名就选中了2菜单栏,包括下面2个子菜单。如下图: error 想了下应该是子菜单没有设置唯一标志index。而且/index这个路由在menus中也找不到,所以就默认匹配index===null的路由了?于是给el-menu-item加上index,果然好...
</el-menu> data(){return{activeIndex:'/device_new/',title:'设备管理'} },mounted() {this.activeIndex=this.$route.path}, 情况二:嵌套路由,当选中子路由时父级菜单要高亮显示,单前选中菜单也是被选中的颜色;(如下图) 当选中版本管理时,版本管理的被选中,同时父级菜单“系统配置”也将高亮显示; ...