el-menu展开和收起子菜单卡顿

前言

当使用el-menu时，不确定层级的情况下，需要使用递归组件；
当使用递归组件时，使用了el-icon，就是这个el-icon导致的BUG

效果图

修改前

修改后

代码

subMenu代码

<template>
  <template v-for="item in list">
    <el-sub-menu :key="item.name" v-if="item.children && item.children.length > 0" :index="item.index">
      <template #title>
        <el-icon v-if="item.icon">
          <component :is="`el-icon-${item.icon}`"></component>
        </el-icon>
        <span>{{ item.name }}</span>
      </template>
      <sub-menu :list="item.children"></sub-menu>
    </el-sub-menu>
    <el-menu-item :key="item.name + '1'" v-else :index="item.index">
      <el-icon v-if="item.icon">
        <component :is="`el-icon-${item.icon}`"></component>
      </el-icon>
      <template #title>{{ item.name }}</template>
    </el-menu-item>
  </template>
</template>

<script lang="ts" setup>
import type { MenuItem } from './menu.d.ts'
defineProps<{ list: MenuItem[] }>()
</script>

menu代码

<el-menu class="el-menu-vertical-demo" router :default-active="route.path" :collapse="collapse">
    <sub-menu :list="list"></sub-menu>
</el-menu>

Bug解决

Bug的问题是，el-icon的样式font-size使用了18px导致的； 我这里只需要给font-size设置为1em就可以，既保持了18px又不会出现bug；

<style lang="scss" scoped>
:deep(.el-icon) {
  font-size: 1em;
}
</style>