el-submenu实现单个菜单折叠

最新推荐文章于 2025-06-18 14:39:56 发布

原创最新推荐文章于 2025-06-18 14:39:56 发布 · 1.3w 阅读

9 ·

CC 4.0 BY-SA版权

UI框架专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何调整Element UI的菜单设置，通过修改unique-opened属性来防止菜单折叠框撑破页面，确保导航菜单在展开多个子菜单时保持良好的布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
以上的效果就是，我打开“系统管理”折叠框，然后再打开“采集服务器”折叠框，这样一来的话就会让这个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>