例如:
<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{ 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; 100%; } .el-menu--horizontal .el-menu--popup-bottom-start{ margin-top: 0 !important; 1160px; margin: auto; box-shadow: none; } .acc{ display: inline-block !important; vertical-align: middle !important; 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; } }