探究 Element Plus Menu 横向多层级展开组件的 Bug 及解决方案

文章目录

[1 ellipsis 是否省略多余的子项（仅在横向模式生效）](#1 ellipsis 是否省略多余的子项（仅在横向模式生效）)
- 问题描述
- 解决方案
[2 多个级别的子菜单位置错乱或默认直接展开](#2 多个级别的子菜单位置错乱或默认直接展开)
- 问题描述
- 解决方案
- - [1 index没有设置](#1 index没有设置)
  - [2 通用策略](#2 通用策略)

1 ellipsis 是否省略多余的子项（仅在横向模式生效）

问题描述

递归复杂menu时候，莫名其妙的ellipsis属性不生效，递归组件如下：

javascript 复制代码

<script setup>
defineProps({
  menuData: {
    type: Array,
    default: () => []
  }
})
</script>
<!-- 莫名其妙有bug 横版不显示省略号 -->
<template>
  <template v-for="(item, index) in menuData" :key="index">
    <el-sub-menu  v-if="item.children && item.children.length" :index="item.path">
      <template #title>
        {{ item.meta.title }}
      </template>
      <MenuItems :menu-data="item.children"/>
    </el-sub-menu>
    <template v-else>
      <!-- ismenu == true 才显示 -->
      <el-menu-item v-if="item.meta.ismenu" :index="item.path">
        {{ item.meta.title }}
      </el-menu-item>
    </template>
  </template>
</template>

<style scoped>

</style>

这个递归组件写法其实是正确的，可是在新版Menu组件中有BUG，这里不能在本组件中尝试整体渲染所有item。

解决方案

如果改成在外部做v-for遍历item可解决该问题，参考如下：

javascript 复制代码

<template>
  <div class="catalog">
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        router
        ellipsis
    >
      <MenuItems v-for="(item, index) in menuData" :key="index" :edata="item"/>
      <!--<MenuItems :menu-data="menuData"/>-->
    </el-menu>
  </div>

  <router-view v-slot="{ Component, route }">
    <!-- <keep-alive>
      <component :is="Component" v-if="route.meta.keepalive == true" :key="route.path" />
    </keep-alive>
    <component :is="Component" v-if="route.meta.keepalive == false" :key="route.path" /> -->
    <keep-alive :include="keepaliveRoutes">
      <component class="p-10" :is="Component" :key="route.path"/>
    </keep-alive>
  </router-view>

</template>

<script lang="ts" setup>
import {defineComponent, onMounted, PropType, ref} from "vue";
import {routes} from "../router"
// import MenuItems from "./MenuItems.vue";

const keepaliveRoutes = ref<string[]>([])
const activeIndex = ref('AccessibleMap') // 默认选中菜单-AccessibleMap 即路由配置的path
const menuData = ref<Record<any, any>>([]) // 菜单数据

routes[0].children.forEach(e => {
  if (e.meta.keepalive) {
    keepaliveRoutes.value.push(e.path)
  }
})

menuData.value = routes[0].children

const handleSelect = (key: string, keyPath: string) => {
  console.log(key, keyPath)
}

const MenuItems = defineComponent({
  name: 'MenuItems',
  props: ['edata'],

  template: `
    <el-sub-menu v-if="edata.children && edata.children.length > 0" :index="edata.path">
      <template #title>
        {{ edata.meta.title }}
      </template>
      <MenuItems v-for="(item, index) in edata.children" :key="index" :edata="item"/>
    </el-sub-menu>
    <template v-else>
      <el-menu-item v-if="edata.meta.ismenu" :index="edata.path">
        {{ edata.meta.title }}
      </el-menu-item>
    </template>
  `,
  setup(props) {
  },
})
</script>
<style scoped lang="scss">
.catalog {
  height: 60px;
}
</style>

可以查看开源代码：whr2349/study-openlayers

2 多个级别的子菜单位置错乱或默认直接展开

问题描述

在使用 Element Plus 的 Menu 组件时，我们可能希望构建一个复杂的导航系统，其中包括多个级别的子菜单。在默认的纵向布局下，Menu 组件表现良好，能够完美展示多级子菜单。然而，在某些应用场景中，我们可能需要一个横向的菜单布局，此时问题就显现出来了。

当你尝试将 Menu 组件设置为横向（mode="horizontal"）并且包含多级子菜单时，可能会发现子菜单的显示存在问题。具体来说，子菜单可能无法正确地展开，或者展开时的样式和位置不符合预期，尤其是在涉及到第三级或更深层次的菜单项时。

解决方案

1 index没有设置

绝大多数情况是因为el-sub-menu这个组件没有index，如果你打开router属性，那么el-sub-menu组件也必须绑定index。

2 通用策略

解决此类问题通常需要从以下几个方面入手：

CSS 定位调整：检查并调整相关的 CSS 样式，确保子菜单能够正确定位。这可能涉及到绝对定位、相对定位以及 z-index 的调整。
响应式设计：确保你的布局能够适应不同的屏幕尺寸，避免在小屏幕上出现布局混乱。
事件监听：监听窗口大小变化，或者菜单项的 hover 事件，动态调整子菜单的显示状态和位置。