Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩遇到问题

最新推荐文章于 2025-02-13 18:54:49 发布

原创

最新推荐文章于 2025-02-13 18:54:49 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了在Vue+ElementUI环境下，自定义动态数据菜单导航组件时遇到的展开收缩问题，特别是菜单文字在折叠后无法隐藏的困扰。通过引入vue-fragment库，并在main.js中配置，成功解决了该问题，实现了预期的展开收缩效果。

Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩遇到问题

自定义组件包含在 fragment下面，不是div 不然展开和收缩会出现字体无法隐藏的问题

如下:
解决菜单导航折叠后文字不隐藏
在这里插入图片描述

出现这个问题是因为我们在<el-menu>嵌套中出现了意料之外的<div>,而<el-menu>标签本身希望里面嵌套的是<el-menu-item>,<el-submenu>,<el-menu-item-group>其中之一
但是我们又不能直接删掉<div>,因为<template>中包含的必须是一个根标签，而v-for会形成不确定的并列标签

项目中安装vue-fragment
cnpm install --save vue-fragment

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

修改为，fragment下面也是由template包裹

代码展示
自定义组件：

<template>
  <fragment class="navMenu">
    <template v-for="(navMenu) in navMenus">
      <el-menu-item
        v-if="
          navMenu.childs == null &&
          navMenu.entity