Vue3+Element-Plus 解决折叠侧边菜单栏后文字不隐藏问题

        一般这个情况发生在使用v-for渲染动态菜单栏时，使用div标签包裹el-menu-item或者el-sub-menu，而且文字不消失是有二级菜单的父项才会出现。

        <el-menu>标签本身希望里面嵌套的是<el-menu-item>,<el-submenu>,<el-menu-item-group>其中之一。

        解决方法很简单，因为Vue3模板支持多个根节点，不用像Vue2一样，所有的内容嵌套在div中，代码如下：

<template>
  <el-menu-item :index="props.path" v-if="!props.children">
    <el-icon v-if="props.icon">
      <component :is="props.icon"></component>
    </el-icon>
    <template #title>
      <span>{
   
   { props.name }}</span>
    </template>
  </el-menu-item>
  <el-sub-menu :index="props.path" v-if="props.children">
    <template #title>
      <el-icon>
        <component :is="props.icon"></component>
      </el-icon>
      <span>{
   
   { props.name }}</span>
    </template>
    <menuItem v-for="item in props.children" :name="item.meta!.title" :path="item.path" :icon="item.meta!.icon"
      :children="item.children">
    </menuItem>
  </el-sub-menu>
</template>

<script lang='ts' setup>
interface Props {
  name: any,
  path: string,
  icon: any,
  children?: any
}
const props = defineProps<Props>()
</script>

       直接拿el-menu-item,  el-sub-menu当做根节点，就可以解决折叠侧边菜单栏后文字不隐藏的问题。