确定el-menu-item的默认选中属性或方法: el-menu组件的default-active属性用于设置默认选中的菜单项。 el-menu-item组件的index属性用于标识每个菜单项的唯一性。 在Vue组件中设置el-menu-item的默认选中状态: 在你的Vue组件中,使用el-menu包裹el-menu-item。 设置el-menu的default-active属性为你想要默认选中的...
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...
<el-menu-item index="/device_new/">设备管理</el-menu-item> <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--horizontal > .el-menu-item { height: 88px; line-height: 10px; } .el-menu.el-menu--horizontal { border-bottom: 0px; } .el-menu-item { height: 88px; line-height: 88px; } .el-menu-item { padding-left: 10px; padding-right: 10px; } .el-menu-item.is-active { f...
(3)、created生命周期设置路由 具体代码如下: <template> <div id="app"> <el-menu :default-active="activeIndex" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router > <el-menu-item index="/"> <i class="el-icon-menu"></i> ...
点击的时候不会选中菜单,页面不跳转。但是访问其他子页面后,通过浏览器回退按钮退回到index页面时,莫名就选中了2菜单栏,包括下面2个子菜单。如下图: error 想了下应该是子菜单没有设置唯一标志index。而且/index这个路由在menus中也找不到,所以就默认匹配index===null的路由了?于是给el-menu-item加上index,果然好...
主要是设置 .el-menu-item.is-active 选择器的样式属性 官方文档中提供background-color、text-color、active-text-color三种属性 仅提供了激活菜单文字颜色,并没有提供激活菜单的其他参数 <el-menudefault-active="0"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose":collapse="collapsed"back...
在使用element中的menu组件时,根据官方文档,可以设置给el-menu设置router属性为:true,给el-menu-item设置index的值为路径,就可以实现点击导航跳转到指定路由。 这样做虽然能实现跳转,但是,若刷新浏览器,则导航会跳转到默认的选中项,而不是我们离开时的导航。
1.在配置路由的时候,设置meta属性,把同一el-menu-item下的页面设置成相同的值.也考虑过把name设置成相同的值,但是显然不行,浏览器会报路由名字相同的警告 {path:"/companyinfo",name:"companyinfo",component:()=>import(/* webpackChunkName: "companyinfo" */"../views/CompanyInfo.vue"), ...
}.el-sub-menu .el-sub-menu__title:hover{color:rgba(72, 118, 255, 1) !important;background-color:transparent !important;border-radius:8px; }.el-sub-menu .el-menu-item{font-size:14px;height:40px;&:hover { color: rgba(72, 118, 255, 1);background-color:rgba(234, 239, 255, 1...