el-submenu实现单个菜单折叠

在这里插入图片描述
以上的效果就是,我打开“系统管理”折叠框,然后再打开“采集服务器”折叠框,这样一来的话就会让这个navMenu显得很高,严重的情况,就会撑破整个页面。怎么办呢?
element代码实现如下:

<template>
    <div class="index-menu">
        <div class="index-nav">
            <el-menu :default-active="defaultActive" :unique-opened="true" background-color="rgba(35,35,35,2)"
                text-color="#FFF" active-text-color="#ccc" style="" router>
                <el-menu-item index="999" :route="{ path: '/home' }" style="text-align:left !important">
                    <i class="el-icon-location"></i>
                    <span class="el-menu-item-name" style="margin-left: 0">主页</span>
                </el-menu-item>

                <el-submenu v-for="(item,index) in menuList" :index="item.routerPath" :key="index">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span class="el-submenu-name">{{item.name}}</span>
                    </template>
                    <el-menu-item v-for="(menu,index) in item.children" :index="menu.routerPath" :key="index">
                        <span class="el-menu-item-name">{{menu.name}}</span>
                    </el-menu-item>
                </el-submenu>
                <!-- 路由是根据后端返回做判断  张帆-->

                <el-submenu index="999">
                    <template slot="title">
                        <i class="iconfont icon-yingyong"></i>
                        <span class="el-submenu-name">音视频后台管理</span>
                    </template>
                    <el-menu-item index="9996" :route="{ path: '/balancing' }">
                        <span class="el-menu-item-name">负载均衡</span>
                    </el-menu-item>
                    <el-menu-item route="/mediaService" index="9998">
                        <span class="el-menu-item-name">流媒体服务</span>
                    </el-menu-item>

                    <el-menu-item route="/trans" index="9999">
                        <span class="el-menu-item-name">转码服务</span>
                    </el-menu-item>
                </el-submenu>

            </el-menu>
        </div>
        <div class="nav-image">
            <img src="../assets/images/map.png" alt />
        </div>
    </div>
</template>

在ele-menu里,讲:unique-opend="false"改成:unique-opend="true"即可
在这里插入图片描述
效果就这样简单的实现啦

活到老,学到老。 踏实+激情+坚持
原文地址:https://www.cnblogs.com/andyZhang0511/p/12246470.html