对于el-menu组件,默认选中项由default-active属性控制。你可以将default-active绑定到一个变量上,该变量存储了你想要默认选中的菜单项的index值或路由信息。 2. 在el-menu组件中设置该属性以实现默认选中效果 你可以通过数据绑定(例如使用v-bind或简写为:)来设置default-active属性。如果你的菜单项是直接通过静态数据...
官方文档给出了设置默认选中的属性。 Menu Attribute 设置:default-active即可。 可是如果不是从导航切换进页面的,比如从上一个页面里的按钮点击进入该界面,就不知道怎么设置当前选中项了。 那只能自己想办法了。 因为我的项目用了vue-router,页面通过<router-view></router-view>引入组件的,所以我就想,在进入组件...
这句话设置选中的背景颜色 .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="200px"><LeftMenu></LeftMenu></el-as...
<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/">谱图分析</el-menu-item> </el-menu> data(){return{activeIndex:'...
(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 :default-active=‘$route.path‘ :router=‘true‘ :unique-opened=‘true‘ :default-openeds="defaultOpeneds"background-color="#bd1e22"text-color="#fff"active-text-color="#ffd04b">//router当导航激活时允许以index作为路由进行页面的跳转,$route.path当前路由对象的路径,字符串,绝对路径/...
</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的值为路径,就可以实现点击导航跳转到指定路由。 这样做虽然能实现跳转,但是,若刷新浏览器,则导航会跳转到默认的选中项,而不是我们离开时的导航。
点击的时候不会选中菜单,页面不跳转。但是访问其他子页面后,通过浏览器回退按钮退回到index页面时,莫名就选中了2菜单栏,包括下面2个子菜单。如下图: error 想了下应该是子菜单没有设置唯一标志index。而且/index这个路由在menus中也找不到,所以就默认匹配index===null的路由了?于是给el-menu-item加上index,果然好...
vue Element动态设置el-menu导航当前选中项 1,npm install vuex --save 2,在src下新建vuex文件夹,新建store.js文件; store.js import Vue from 'vue'import Vuex from'vuex'Vue.use(Vuex) const state={ count:0, adminleftnavnum:"/"//管理后台左侧导航}...