状况
- 侧边栏折叠后,部分图标消失,且字体不消失
解决
- 1.图标消失
去除 下的 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 下只能使用规定的标签吧,而且文字不消失是有二级菜单的父项才会出现
- 首先安装插件 vue-fragment
npm i -s vue-fragment
- 在 main.js 应用插件
import Fragment from 'vue-fragment'
Vue.use(Fragment.Plugin)
- 替换 el-menu 下包含的div标签
<div></div> => <fragment></fragment>