左侧菜单栏收起后el-menu Dom树消失

Question

左侧菜单栏收起后el-menu组件消失图1

<!--SidebarMenu-->
<template>
  <!-- 一级 menu 菜单 -->
  <el-menu
    :collapse='!store.getters.sidebarOpened'
    :background-color='store.getters.cssVar.menuBg'
    :text-color='store.getters.cssVar.menuText'
    :active-text-color='store.getters.cssVar.menuActiveText'
    :unique-opened='true'
    :default-active='activeMenu'
    router
  >
    <sidebar-item v-for='item in routes' :key='item.path' :route='item'></sidebar-item>
  </el-menu>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { filterRouters, generateMenus } from '@/utils/route'
import SidebarItem from './SidebarItem.vue'
import { useStore } from 'vuex'

const router = useRouter()
const store = useStore()
const routes = computed(() => {
  const fRoutes = filterRouters(router.getRoutes())
  return generateMenus(fRoutes)
})

// 默认激活项
const route = useRoute()
const activeMenu = computed(() => {
  const { path } = route
  return path
})
</script>
<style lang='scss' scoped></style>

<--! SidebarItem -->
<template>
  <!-- 支持渲染多级 menu 菜单 -->
  <el-sub-menu v-if='route.children.length > 0' :index='route.path'>
    <template #title>
      <menu-item :title='route.meta.title' :icon='route.meta.icon'></menu-item>
    </template>
    <!-- 循环渲染 -->
    <sidebar-item
      v-for='item in route.children'
      :key='item.path'
      :route='item'
    ></sidebar-item>
  </el-sub-menu>
  <!-- 渲染 item 项 -->
  <el-menu-item v-else :index='route.path'>
    <menu-item :title='route.meta.title' :icon='route.meta.icon'></menu-item>
  </el-menu-item>
</template>

<script setup>
import MenuItem from './MenuItem'
import { defineProps } from 'vue'
// 定义 props
defineProps({
  route: {
    type: Object,
    required: true
  }
})

</script>

图

Answer 1

Sunday 2021-12-31 10:19:43

最后经过 debug ，发现问题出现在了 element-plus 这个组件库中，只需要更换组件库的版本为课程中的版本即可解决这个问题。

Answer 2

qq_泰坦的冬天_0 2021-12-20 15:00:33

试试看SidebarMenu下style

.hideSidebar {

  .el-menu-item,

  .el-sub-menu__title {

    padding: 0px !important;

    padding-left: 20px !important;

  }

}

Answer 3

Sunday 2021-12-13 11:44:40

你好

从你给出的代码来看的话，我并没有发现什么问题。

从错误来看，el-menu 确实没有被渲染出来。你可以先尝试下能不能定位出问题，如果不行的话，可以在 QQ 群里找到我把代码压缩包发我一下，我运行我去查看原因