el-menu菜单去除动画后仍然卡顿问题解决

现象：

        el-menu去除动画后，展开折叠菜单时仍然出现卡顿情况

<el-menu
     :default-active="$route.path"
     :collapse-transition="false"
     unique-opened
     :collapse="isCollapse"
     @select="handleSelect"></el-menu>

原因：

        使用了动态的icon图标，图标的font-size大小导致计算属性异常，导致动画卡顿。

解决方法：

        固定icon的font-size大小

# 影响卡顿的代码
<el-icon v-if="item.icon">
    <component :is="item.icon"></component>
</el-icon>

# 给每个动态icon添加一个类
<el-icon v-if="item.icon">
    <component :is="item.icon" class="icon"></component>
</el-icon>

# 类的样式，优化el-menu icon导致的菜单缩放展开卡顿问题
.icon {
    font-size: 1em;
}

        给每个动态icon添加样式，而不是直接修改el-icon的样式，如果直接修改el-icon的样式的话，菜单会变成如下情况，下拉箭头也会随着变大

 转载：https://blog.youkuaiyun.com/qq_43784821/article/details/139818173