element el-menu 包含下拉菜单
2021/4/8 18:25:16
本文主要是介绍element el-menu 包含下拉菜单,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
例如:
<div class="el-menu-demo"> <el-menu :default-active="$route.path" class="el-menus" mode="horizontal" @select="handleSelect" :router="true"> <el-menu-item index="/dashboard"> <span>菜单管理</span> </el-menu-item> <el-menu-item index="/logoconfigur"> <span>LOGO配置</span> </el-menu-item> <el-submenu index="/contentmanage"> <template slot="title">内容管理</template> <el-menu-item class="acc" index="/contentmanage/index">首页</el-menu-item> <el-menu-item class="acc" index="/contentmanage/companyprofile">公司简介</el-menu-item> <el-menu-item class="acc" index="/contentmanage/contactus">联系我们</el-menu-item> <el-menu-item class="acc" index="/contentmanage/openplatform">开放平台</el-menu-item> </el-submenu> <el-menu-item index="/bottommanage"> <span>底部管理</span> </el-menu-item> </el-menu> </div>
route:
{ path: '/contentmanage/index', id:'3', component: Layout, redirect: 'contentmanage/index', alwaysShow: true, // name: '内容管理', // meta: {title: '内容管理', icon: 'dashboard'}, children: [ { path: '/contentmanage/index', component: () => import('@/views/contentmanage/index'),//首页 name: '首页', meta: { title: '首页', icon: 'dashboard', affix: true } }, { path: '/contentmanage/companyprofile', component: () => import('@/views/contentmanage/companyprofile'),//公司简介 name: '公司简介', meta: { title: '公司简介', icon: 'dashboard', affix: true } }, { path: '/contentmanage/contactus', component: () => import('@/views/contentmanage/contactus'),//联系我们 name: '联系我们', meta: { title: '联系我们', icon: 'dashboard', affix: true } }, { path: '/contentmanage/openplatform', component: () => import('@/views/contentmanage/openplatform'),//开放平台 name: '开放平台', meta: { title: '开放平台', icon: 'dashboard', affix: true } } ] },
一级菜单样式设置:
.el-menu-demo{ width: 1300px; margin: auto; text-align: left; .el-menu-item{ height: 45px; line-height: 45px; font-family: PingFang SC; font-weight: bold; color: #919193; } .el-menus{ display: inline-block; vertical-align: top; .el-menu-item.is-active{ border-bottom: none; color: #3C56C6; } .el-submenu{ height: 45px; .el-submenu__title{ height: 45px; line-height: 50px; color: #919193; font-weight: 600; } } .el-submenu.is-active .el-submenu__title{ border-bottom: none !important; color: #3C56C6 !important; } } }
二级菜单样式设置:
.el-menu--horizontal{ background: #fff; width: 100%; } .el-menu--horizontal .el-menu--popup-bottom-start{ margin-top: 0 !important; width: 1160px; margin: auto; box-shadow: none; } .acc{ display: inline-block !important; vertical-align: middle !important; width: 110px; text-align: center; } .acc.is-active{ color: #3C56C6 !important; border-bottom: 2px solid #3C56C6; } .condition-table{ margin-top: 20px; .pagein_box{ margin-top: 20px; text-align: right; } }
这篇关于element el-menu 包含下拉菜单的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)