.el-menu-item.is-active { color: #ffffff;} .el-submenu__title i { color: #ffffff;} .el-menu-item-group { .el-menu-item-group__title { color: #ffffff;// padding-left: 30px !important;} } .el-submenu { .el-submenu__title { padding-left: 30px !important;&:hover { bac...
<el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="2-3">选项3</el-menu-item> </...
1.要实现路由跳转,先要在el-menu标签上添加router属性,然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。 2.导航当前项,在el-menu标签中绑定 :default-active="$route.path",注意是绑定属性,不要忘了加“:”,当$route.path等于el-menu-item标签中的index属性值时...
name}}</span> </el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> /* 意思是只有collapse是false的时候才起效果,为true折叠状态不起效果 */ .el-menu-vertical-demo:not(.el-menu--collapse) { width: 280px; height: 700px; /* min-height: 400px; max-height: 580px; *...
在做管理后台的时候需要有3级关联的菜单,左侧菜单用了el-menu-item-group、el-menu-item组件,菜单数据结构如下图: 在左侧菜单组件中代码如下 遍历menuData这个数组,在父组件以 this.$refs.leftMenu.menuData = this.childMenu 的方式传参(props的方式也试过)。结果报了这个错: 但是在菜单子组件里面写div来...
最初的样式,越看越不舒服。 1 修改导航栏的文字大小、 善用F12+ctrlshiftC 比如想改菜单的字体大小,直接F12点击字体: 可以看到该组件对应的类名是el-menu-item,我们在右边的Styles中找到这个类,果然发现了它对应的样式: 我们直接就在页面上修改该样式,增加一个字体大小: ...
<el-menu-item style="height:88px;line-height:88px;"> <el-dropdown trigger="click"> <el-button type="text" size="mini" style="color: white"> 当前用户:{{ name }} <i class="el-icon-arrow-down el-icon--right" /> </el-button> ...
1、router属性,若使用router属性menu-item的index将对应router的path属性 2、mode,下拉菜单的模式分为horizontal和vertical两种模式 3、background-color,background-color属性为下拉菜单整体的背景颜色 4、text-color,text-color为下拉菜单中的文字的颜色 5、active-text-color为选中的菜单的颜色 ...
el-menu菜单标签（⾥⾯可以包括：el-submenu和el-menu- item）<el-menu> 1、router属性，若使⽤router属性menu-item的index将对应router的path属性 2、mode,下拉菜单的模式分为horizontal和vertical两种模式 3、background-color，background-color属性为下拉菜单整体的背景颜⾊ 4、text-color，text-color为下拉...
<el-menu router :default-active="$route.path"class="el-menu-vertical-demo"open="handleOpen"close="handleClose"background-color="#3C4C66"text-color="#fff"active-text-color="#409EFF"> <el-menu-item class="list-group"> <i class="el-icon-setting"></i> 基本设置 </el-menu...