解决el-menu动态渲染菜单数据后折叠菜单栏时文字不隐藏

最新推荐文章于 2023-09-25 21:09:34 发布

呆子小木心

最新推荐文章于 2023-09-25 21:09:34 发布

阅读量753

点赞数

分类专栏： vue elementUI 文章标签： vue.js html

本文链接：https://blog.youkuaiyun.com/cc6_66/article/details/120778049

版权

vue 同时被 2 个专栏收录

50 篇文章

订阅专栏

elementUI

5 篇文章

订阅专栏

该博客介绍了如何在Vue中处理el-menu组件动态渲染菜单数据后，折叠菜单时子菜单的文字不隐藏的问题。通过引入vue-fragment插件，将菜单项包裹在fragment标签内，实现子菜单文字的正确隐藏。步骤包括安装vue-fragment、在main.js中引入并使用，以及在模板中使用fragment进行动态渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决el-menu动态渲染菜单数据后折叠菜单栏时文字不隐藏

1，安装 vue-fragment

cnpm i vue-fragment --save

2，在main.js中引入

// main.js
import Fragment from ‘vue-fragment’
Vue.use(Fragment.Plugin)

3，使用fragment标签

<fragment  v-for="item in menuData" :key="item.id">
  <el-submenu v-if="!item.children" :index="item.id" >
      <template slot="title">
          <span slot="title">{{item.menuName}}</span>
      </template>
      <el-menu-item v-for="item1 in item.children" :index="item1.menuId" :key="item1.menuId">
      <span slot="title">{{item1.menuName}}</span>
      </el-menu-item>
      </el-submenu>
      <el-menu-item v-else :index="item.menuId" :key="item.menuId">
        <span slot="title">{{item.menuName}}</span>
   </el-menu-item>
</fragment>