硅谷甄选项目：element-plus中有多个子菜单的菜单的折叠功能失效

最新推荐文章于 2024-06-27 09:26:58 发布

这又何妨

最新推荐文章于 2024-06-27 09:26:58 发布

阅读量616

点赞数 3

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/m0_64506822/article/details/131733203

版权

文章详细描述了一个Vue应用中Menu组件如何根据路由信息动态生成菜单的过程，同时指出在特定HTML结构下出现的折叠异常问题。通过分析代码，可以看到组件使用了v-for指令处理不同数量子路由的情况，并用el-sub-menu处理多子路由场景，还涉及递归组件的使用来渲染子菜单。

摘要由CSDN通过智能技术生成

下面是Menu组件的内容，其中menuList是一些路由信息，根据路由信息动态生成菜单

奇怪的来了：

而去掉这层div后：

正常折叠：

下面补充Menu.vue代码如下：

<template>
  <div>
    <template v-for="item 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>
<script setup lang="ts">
import { useRouter } from "vue-router";
defineProps(["menuList"]);
// 获取路由器
const $router = useRouter();
// 点击菜单的回调
const goRoute = (vc: any) => {
  console.log(vc);
  // 编程式导航进行路由跳转
  $router.push(vc.index);
};
</script>

<style scoped></style>