状况
侧边栏折叠后,部分图标消失,且字体不消失
解决办法
1.图标消失
去除 <el-menu-item>
下的 template
标签
例如:
<el-menu-item :index="subItem.path">
<template slot="title">
<i :class="subItem.icon"></i>
<span slot="title">{
{ subItem.menuName }}</span>
</template>
</el-menu-item>
改成:
<el-menu-item :index="subItem.path">
<i :class="subItem.icon"></i>
<span slot="title">{
{ subItem.menuName }}</span>
</el-menu-item>
2.文字不消失
我是使用 for 循环进行动态渲染侧边栏的,刚开始是使用div作为标签进行 for 循环,折叠后文字不消失
尝试用了一下编码但不渲染的标签代替div就隐藏了。div包在 el-menu
标签中才会出现这种问题。
初步猜测是因为 el-menu
下只能使用规定的标签吧,而且文字不消失是有二级菜单的父项才会出现
(1)首先安装插件 vue-fragment
npm i -s vue-fragment
(2)在 main.js
应用插件
import Fragment from 'vue-fragment'
Vue.use(Fragment.Plugin)
(3)替换 el-menu
下包含的div标签
<div></div> => <fragment></fragment>
(4)替换后效果