ElementUI的NavMneu動態渲染多級菜單遇到的坑（菜單折疊時文字不隱藏）

1. 文字不隱藏的效果圖

很明顯這樣是無法實現需求的。太丑了

2. 兩種解決方案

2.1 使用vue-fragment

• 安裝 vue-fragment

npm install vue-fragment --save

• 組件內引入

import { Fragment } from 'vue-fragment
components: { Fragment }

• 頁面中使用 最最外層的div替換成fragment

<template> <fragment> <template v-if="menu.sub.length === 0"> <el-menu-item :index="menu.index"> <i class="el-icon-menu"></i> {{menu.name}} </el-menu-item> </template> <el-submenu v-else :index='menu.index'> <template slot="title"><i :class="menu.icon"></i><span>{{menu.name}}</span></template> <template v-for="child in menu.sub"> <SideNavItem v-if="child.sub && child.sub.length > 0" :menu="child" :key="child.index"/> <el-menu-item v-else :key="child.index" :index="child.index"> <i class="el-icon-location"></i> {{child.name}} </el-menu-item> </template> </el-submenu> </fragment> </template> 

2.2 使用css控制樣式

• 控制有二級菜單的文字隱藏

/*隱藏文字*/ .el-menu--collapse .el-submenu__title span{ display: none; } /*隱藏 > */ .el-menu--collapse .el-submenu__title .el-submenu__icon-arrow{ display: none; } 

• 控制一級菜單的文字隱藏

.el-menu--collapse .el-menu-item { color: transparent !important; i{ color: #fff !important; } } 

最終效果

這樣做只有一個問題，就是只有一級菜單時, 鼠標移上去它沒有tootip提示。但這個也不影響

點個贊吧！謝謝！