官方文档给出了设置默认选中的属性。 Menu Attribute 设置:default-active即可。 可是如果不是从导航切换进页面的,比如从上一个页面里的按钮点击进入该界面,就不知道怎么设置当前选中项了。 那只能自己想办法了。 因为我的项目用了vue-router,页面通过<router-view></router-view>引入组件的,所以我就想,在进入组件...
<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:'...
要设置el-menu默认选中第一个菜单项,你可以使用default-active属性。以下是详细的步骤和示例代码: 确认el-menu是Element UI的组件: el-menu确实是Element UI库中的一个组件,用于创建具有导航功能的菜单。 查找Element UI文档中关于el-menu的默认选中项设置: 根据Element UI的官方文档,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...
这篇文章给大家分享的是有关如何使用element-ui的el-menu导航选中后刷新页面保持当前选中状态的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 具体代码如下所示: <el-menu :default-active=‘$route.path‘ :router=‘true‘ :unique-opened=‘true‘ :default-openeds="defaultOpened...
elementui高亮某一行 el-menu高亮,在使用element中的menu组件时,根据官方文档,可以设置给el-menu设置router属性为:true,给el-menu-item设置index的值为路径,就可以实现点击导航跳转到指定路由。这样做虽然能实现跳转,但是,若刷新浏览器,则导航会跳转到默认的选中项
<el-menu mode="horizontal" class="topMenu" background-color="transparent" text-color="#fff" active-text-color="#ffd04b" :default-active="ActiveIndex" :router="false" :unique-opened="true" @select="HandleSelect" > <el-menu-item index="1" @click="newPatient" v-if="if_newPatient">...
(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" ...
场景描述: 比如我们的home首页(父路由) 是一个 el-menu 的菜单栏。 同时,导航头部有一个反馈意见建议的按钮。 点击这个按钮的时候,希望左侧的菜单栏取消选中,并折叠。 如图: 点击1 的时候 , 2 取消选中,父菜单折叠。 菜单.jpg 因为该操作都是在home页面中处理的,所以不涉及到跨页面数据传递的问题,如果有需要...
2.子级选中后,父级有下划线,可以通过以下样式修改去除下划线</em><em>{ border-bottom:none!important; }<br>修改后如图:<br></em><em> </em><em id="__mceDel"><br> </em> .el-submenu.is-active > .el-submenu__title .el-menu--horizontal > .el-submenu .el-submenu__title...