标签：el name title menu contentmanage important 下拉菜单

例如：

<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;
        }
    }

标签：el,name,title,menu,contentmanage,important,下拉菜单
来源： https://www.cnblogs.com/moguzi12345/p/14633609.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。