el-menu中添加router <el-menuactive-text-color="#f9cc4b"text-color="white"background-color="#63779c"class="el-menu-vertical-demo"router :collapse="isCollapse" > <el-menu-item v-for="item in commonRouter":key="item.name":index="item.path" > <component class="icons" :is="item.meta...
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...
问题是elementUI的el-menu组件提供了一个默认高亮的属性default-active,当页面刷新后default-active的值就会成为默认给的值,解决这个只用取出当前页的路由然后赋值给activeIndex即可,代码如下: <el-menu :default-active="activeIndex" mode="horizontal" :router="true" background-color="#091639" text-color="#ff...
由如下代码可知,<el-menu-item :index="child.path"中path表示点击时激活的路由,而我们现在做的是要同步以下路由,我们要改变的是<el-menu>的:default-active="activePath"属性 <el-menu:uniqueOpened="true"class="el-menu-vertical-demo"text-color="#fff"background-color="#272727"active-text-color="#ffd...
<el-scrollbar ref="scrllbar" style="width:100%; height: 200px" wrap-class="scrollbar-wrapper"> <el-menu ref="menu" :collapse="collapseStatus" :unique-opened="uniqueOpened" :active-text-color="activeColor" :collapse-transition="false" @open="handleOpen" @close="handleClose" @select="ha...
<el-menu router active-text-color="#ffd04b" background-color="#000" class="el-menu-vertical-demo" :default-active="this.$route.path" text-color="#fff" @open="" @close=""> <template v-for="route of this.$store.state.menu"> <template v-if="route.children === null || route....
在el-menu组件里有这样一个属性,default-active用来表示当前激活菜单的 index 1、如果给default-active设置一个默认值,那么刷新页面时,会出现一个问题,即路由地址和菜单对应的index是不一致的。 <el-menu routerdefault-active="/"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"> ...
/* 修改激活时的背景色 */ .el-menu-item.is-active { background-color: red !important; } /* 如果需要修改子菜单激活时的背景色,可以添加以下样式 */ .el-submenu__title.is-active { background-color: red !important; } 注意:这里使用了!important来确保你的样式能够覆盖Element UI的默认样式。然...
<el-menu:text-color="$store.getters.globalCss.menuText":background-color="$store.getters.globalCss.menuBg":active-text-color="$store.getters.globalCss.menuActiveText":default-active="MenuActive":collapse="!$store.getters.sideBarOpened":collapse-transition="false"routerclass="side-menu"></el-...
active-text-color="#FF8244" > <sidebar-item v-for="item in routes" :key="item.path" :route="item" ></sidebar-item> </el-menu> </template> <script setup> importSidebarItem from'./SidebarItem' import{ ref, computed, watch } from'vue' ...