【硅谷甄选】P44 element-plus 含有多个子菜单的菜单的折叠字体图标溢出

element-plus 设置子菜单折叠，例如：

但是项目出现问题，折叠后字体图标溢出：

<template>
  <div>
    <template v-for="(item, index) in menuList" :key="item.path">
      
      <template v-if="!item.children">
        <el-menu-item :index="item.path" v-if="!item.meta.hidden" @click="goRoute">
          <el-icon>
            <component :is="item.meta.icon">component>
          el-icon>
          <template #title>
            <span>{{ item.meta.title }}span>
          template>
        el-menu-item>
      template>

      
      <template v-if="item.children && item.children.length == 1">
        <el-menu-item :index="item.children[0].path" v-if="!item.children[0].meta.hidden" @click="goRoute">
          <el-icon>
            <component :is="item.children[0].meta.icon">component>
          el-icon>
          <template #title>
            <span>{{ item.children[0].meta.title }}span>
          template>
        el-menu-item>
      template>

      
      <el-sub-menu :index="item.path" v-if="item.children && item.children.length > 1">
        <template #title>
          <el-icon>
            <component :is="item.meta.icon">component>
          el-icon>
          <span>{{ item.meta.title }}span>
        template>
        <Menu :menuList="item.children">Menu>
      el-sub-menu>

    template>
  div>
template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

发现去掉最大的父元素 div ，得以解决~

<template>
  <template v-for="(item, index) in menuList" :key="item.path">
    
    <template v-if="!item.children">
      <el-menu-item :index="item.path" v-if="!item.meta.hidden" @click="goRoute">
        <el-icon>
          <component :is="item.meta.icon">component>
        el-icon>
        <template #title>
          <span>{{ item.meta.title }}span>
        template>
      el-menu-item>
    template>

    
    <template v-if="item.children && item.children.length == 1">
      <el-menu-item :index="item.children[0].path" v-if="!item.children[0].meta.hidden" @click="goRoute">
        <el-icon>
          <component :is="item.children[0].meta.icon">component>
        el-icon>
        <template #title>
          <span>{{ item.children[0].meta.title }}span>
        template>
      el-menu-item>
    template>

    
    <el-sub-menu :index="item.path" v-if="item.children && item.children.length > 1">
      <template #title>
        <el-icon>
          <component :is="item.meta.icon">component>
        el-icon>
        <span>{{ item.meta.title }}span>
      template>
      <Menu :menuList="item.children">Menu>
    el-sub-menu>
  template>
template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38