element 导航栏（纵排）

纵排导航

• html

<div>
    <el-menu mode="vertical" unique-opened background-color="#304156" text-color="#fff" active-text-color="#409EFF">
    <div class="menu-wrapper">
        <!-- 插槽 -->
        <template v-for="(item, indexs) in routes" v-if="!item.hidden && item.children">
        <!-- 路由跳转 -->
        <router-link
            v-if="item.children.length === 1 && !item.children[0].children && !item.alwaysShow"
            :to="item.children[0].path"
            :key="item.children[0].name">
            <!-- 二级菜单 -->
            <el-menu-item :index="item.children[0].path" class="submenu-title-noDropdown">
            <!-- 这里可以加图标 -->
            <!-- <i :class="item.children[0].Icon"></i> -->
            <!-- {{item.children[0].Icon}} -->

            <!-- 文本 -->
            <span v-if="item.children[0].meta && item.children[0].meta.title">
                {{ item.children[0].meta.title }}
            </span>
            </el-menu-item>
        </router-link>

        <!-- 一级菜单 -->
        <el-submenu v-else :index="item.name || item.path" :key="item.name">
            <!-- 一级菜单的模板区域 -->
            <template slot="title">
            <!-- 这里可以加图标 -->
            <!-- <i :class="item.Icon"></i> -->
            <!-- 文本 -->
            <span v-if="item.meta && item.meta.title">{{ item.meta.title }}</span>
            </template>

            <!-- 插槽 -->
            <template v-for="(child, idx) in item.children" v-if="!child.hidden">
            <!-- 父组件-本身 -->
            <sidebar-item
                :is-nest="true"
                class="nest-menu"
                v-if="child.children && child.children.length > 0"
                :routes="[child]"
                :key="child.path"></sidebar-item>

            <!-- 路由跳转 -->
            <router-link v-else :to="child.path">
                <!-- 二级菜单 -->
                <el-menu-item :index="child.path">
                <!-- 这里可以加图标 -->
                <!-- <i :class="item.children[idx].Icon"></i> -->

                <!-- 文本 -->
                <span v-if="child.meta && child.meta.title">{{ child.meta.title }}</span>
                </el-menu-item>
            </router-link>
            </template>
        </el-submenu>
        </template>
    </div>
    </el-menu>
</div>

• 数据

routes: [
{
    id: 1,
    name: '/',
    path: '/',
    component: 'Layout',
    redirect: '/index',
    hidden: true,
    Icon: 'el-icon-eleme',
    children: [
    {
        name: 'index',
        path: '/index',
        meta: { title: '首页' },
        Icon: 'el-icon-eleme',
        component: 'index/index',
        Icon: 'el-icon-delete-solid',
    },
    ],
},
{
    id: 2,
    path: '/give',
    component: 'Layout',
    redirect: '/give',
    hidden: false,
    Icon: 'el-icon-eleme',
    children: [
    {
        name: '/give',
        path: '/give',
        meta: { title: '赠送管理' },
        component: 'give/give',
        Icon: 'el-icon-eleme',
    },
    ],
},
{
    id: 6,
    name: '/land-list',
    path: '/land',
    component: 'Layout',
    redirect: '/land/land-list',
    meta: { title: '土地列表' },
    hidden: false,
    Icon: 'el-icon-eleme',
    children: [
    {
        name: '/landList',
        path: '/land/land-list',
        meta: { title: '土地列表' },
        component: 'land/landList',
        Icon: 'el-icon-delete-solid',
    },
    {
        name: '/landSet',
        path: '/land/land-set',
        meta: { title: '土地批量设置' },
        component: 'land/landSet',
        Icon: 'el-icon-delete-solid',
    },
    ],
},
],

• scss

.nest-menu .el-submenu > .el-submenu__title,
.el-submenu .el-menu-item {
  min-width: 180px !important;
  background-color: #1f2d3d !important;
}
.nest-menu .el-submenu > .el-submenu__title,
.el-submenu .el-menu-item :hover {
  background-color: #001528 !important;
}
.el-menu--collapse .el-menu .el-submenu {
  min-width: 180px !important;
}