el-menu折叠时如何控制子菜单标题显示隐藏？

Question

在使用 Element Plus 的 `el-menu` 组件实现侧边栏菜单时，当设置 `collapse` 属性为 `true` 实现折叠功能后，子菜单的标题默认仍会部分显示或 tooltip 形式提示，影响视觉效果。常见问题是：如何在 `el-menu` 折叠状态下精确控制子菜单标题的完全隐藏或自定义显示内容？特别是在嵌套路由或多级菜单场景下，希望仅显示图标、彻底隐藏文字，避免布局错乱或文字溢出。开发者常因未正确结合 `collapsed` 状态与插槽（slot）或 CSS 控制策略，导致无法实现理想的折叠体验。

Answer 1

1. 问题背景与现象分析

在使用 Element Plus 的 el-menu 组件实现侧边栏菜单时，开发者常通过设置 :collapse="true" 实现菜单折叠功能。然而，在实际应用中，即使菜单已折叠，子菜单项的文字标题仍可能以部分显示或 tooltip 形式出现，造成视觉干扰。

这种现象在嵌套路由或多级菜单结构中尤为明显：当用户期望仅展示图标、完全隐藏文字内容时，Element Plus 默认行为会自动启用 tooltip 显示完整菜单名称，这虽然提升了可访问性，但破坏了简洁的设计意图。

根本原因在于：el-sub-menu 在折叠状态下依赖内部逻辑判断是否显示文本，且默认未提供细粒度控制接口，导致开发者难以精确干预渲染行为。

2. 常见误区与典型错误实践

• 仅依赖 collapse 属性：认为设置 :collapse="true" 即可自动隐藏所有文字，忽略组件内部对子菜单的特殊处理逻辑。
• 滥用 CSS 强制隐藏：直接使用 display: none 隐藏文本节点，可能导致 tooltip 失效或布局错位。
• 未结合 Vue 响应式状态：未能将菜单折叠状态（如 isCollapsed）与模板逻辑联动，造成插槽内容无法动态切换。
• 忽视多级菜单差异：一级菜单和二级及以上子菜单在折叠时的行为不一致，需分别处理。

3. 解决方案层级演进

层级	方法	适用场景	优点	缺点
Level 1	CSS 控制文本透明度	快速原型开发	简单快捷	仍占用空间，无障碍支持差
Level 2	v-if 结合 collapsed 状态控制插槽	中等复杂度项目	精准控制 DOM 渲染	需重构模板结构
Level 3	自定义 title 插槽 + 动态条件渲染	大型管理系统	高度可定制，兼容无障碍	代码量增加
Level 4	封装高阶菜单组件 + 全局状态管理	微前端或多模块架构	复用性强，维护性高	初期投入大

4. 核心实现：基于插槽与响应式状态的精确控制

要实现折叠状态下仅显示图标、彻底隐藏文字，关键在于利用 el-sub-menu 的 title 插槽，并结合 Vue 的响应式变量进行条件渲染。

<template>
  <el-menu :collapse="isCollapsed">
    <el-sub-menu v-for="menu in menus" :key="menu.id">
      <template #title>
        <i :class="menu.icon"/>
        <span v-if="!isCollapsed">{{ menu.title }}</span>
      </template>
      <el-menu-item 
        v-for="child in menu.children" 
        :key="child.id"
        @click="handleRoute(child.route)"
      >
        <template #title>
          <i :class="child.icon"/>
          <span v-if="!isCollapsed">{{ child.title }}</span>
        </template>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { ref } from 'vue'
const isCollapsed = ref(true)
const menus = [
  {
    id: 1,
    title: 'Dashboard',
    icon: 'el-icon-menu',
    children: [
      { id: 11, title: 'Analytics', icon: 'el-icon-data-line', route: '/analytics' },
      { id: 12, title: 'Reports', icon: 'el-icon-document', route: '/reports' }
    ]
  }
]
const handleRoute = (route) => {
  // 路由跳转逻辑
}
</script>

5. 深度优化：CSS 与无障碍性协同策略

即便使用 v-if 或 v-show 控制文本显示，仍需注意以下细节：

1. 确保图标有足够的点击热区，避免折叠后难以操作；
2. 为图标添加 aria-label 以提升屏幕阅读器体验；
3. 使用 white-space: nowrap 防止文字换行溢出；
4. 通过 transition 实现平滑展开/收起动画；
5. 对深层嵌套菜单（三级以上）采用递归组件模式统一处理；
6. 监听窗口尺寸变化，动态更新 isCollapsed 状态；
7. 利用 el-tooltip 手动封装提示，替代默认 tooltip 行为；
8. 避免在 span 上设置固定宽度，防止布局僵硬；
9. 测试 RTL（从右到左）语言环境下的显示兼容性；
10. 在 SSR 场景下确保服务端与客户端渲染一致性。

6. 架构级设计：构建可复用的 CollapseMenu 组件

对于大型系统，建议封装一个通用的侧边栏菜单组件，接收路由配置并自动处理折叠逻辑。该组件应具备以下特性：

// CollapseMenuItem.vue
<template>
  <el-menu-item v-if="!hasChildren" :index="route">
    <el-icon><component :is="icon"/></el-icon>
    <span v-if="!collapsed">{{ label }}</span>
  </el-menu-item>

  <el-sub-menu v-else :index="route">
    <template #title>
      <el-icon><component :is="icon"/></el-icon>
      <span v-if="!collapsed">{{ label }}</span>
    </template>
    <CollapseMenuItem 
      v-for="item in children" 
      :key="item.route"
      v-bind="item"
      :collapsed="collapsed"
    />
  </el-sub-menu>
</template>

<script setup>
defineProps({
  label: String,
  icon: String,
  route: String,
  children: Array,
  collapsed: Boolean
})

const hasChildren = computed(() => !!children && children.length > 0)
</script>

7. 可视化流程：菜单渲染决策树

graph TD
            A[开始渲染菜单项] --> B{是否有子菜单?}
            B -- 是 --> C[使用 el-sub-menu]
            B -- 否 --> D[使用 el-menu-item]
            C --> E{当前是否折叠?}
            D --> F{当前是否折叠?}
            E -- 是 --> G[仅渲染图标 + aria-label]
            E -- 否 --> H[渲染图标 + 文字]
            F -- 是 --> I[仅渲染图标 + aria-label]
            F -- 否 --> J[渲染图标 + 文字]
            G --> K[绑定事件与路由]
            H --> K
            I --> K
            J --> K
            K --> L[结束]