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