ElementPlus「Menu」折叠时无法折叠标题文字

问题

跟着课程在写菜单栏的折叠功能时，发现标题折叠不起来，问题代码与图片如下：

/*父组件*/
      <el-scrollbar always class="el-scrollbar">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#001529"
          class="el-menu-vertical-demo"
          text-color="#fff"
          :default-active="$route.path"
          :collapse="LayOutSettingStore.fold ? true : false">
          <Logo></Logo>
          <Menu :menuList="userStore.menuRoutes"></Menu>
        </el-menu>
      </el-scrollbar>

/*子组件「Logo」*/
  <el-menu-item class="box">
    <img :src="setting.logo" />
    <p class="title">{{ setting.title }}</p>
  </el-menu-item>

可以看到，当隐藏起来的时候，文字无法正常隐藏

问题原因

百度有找到类似的问题，
element-ui 的<el-menu标签本身希望里面嵌套的是<el-menu-item, 而<el-submenu,<el-menu-item-group之一，但是却嵌套了<div,从而导致收折就隐藏不了文字。
个人推测
div和p标签都是块级元素，可能是这个原因

解决方法

把p标签改为span标签

<template>
  <el-menu-item class="box">
    <img :src="setting.logo" />
    <span class="title">{{ setting.title }}</span>
  </el-menu-item>

</template>