点击侧边栏收起都el-menu dom树消失

Question

点击侧边栏收起都el-menu dom树消失

<!--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-13 11:45:15

你好

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

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

• 提问者 weixin_慕设计2331308 #1

  qq群咋进呀

• 提问者 weixin_慕设计2331308 #2

  看到了