Vue3开发——Ant Design Vue 实现多级嵌套菜单

最近在用 ant design vue 组件开发，需要对后台返回的菜单数据进行展示，菜单级数不确定，因此，需要实现一个多级嵌套的菜单组件。

开始吧。

递归思路

父组件——模板代码：

<a-menu
  v-model:selectedKeys="current"
  mode="horizontal"
  @click="menuClick"
  theme="dark"
  :style="{ lineHeight: '64px' }"
>
  <template v-for="item in menuList" :key="item.key">
    <template v-if="!item.children">
      <a-menu-item :key="item.key">
        {{ item.title }}
      </a-menu-item>
    </template>
    <template v-else>
      <psp-sub-menu :key="item.key" :menu-info="item" />
    </template>
  </template>
</a-menu>

子组件——需要封装的组件，实现子菜单递归：

// vue 文件
<!-- 根据路由生成 多级递归嵌套菜单 -->
<template>
  <a-sub-menu :key="menuInfo.key">
    <template #title>{{ menuInfo.title }}</template>
    <template v-for="item in menuInfo.children" :key="item.key">
      <template v-if="!item.children">
        <a-menu-item :key="item.key">
          {{ item.title }}
        </a-menu-item>
      </template>
      <template v-else>
      	<!-- 递归菜单数据 -->
        <psp-sub-menu :menu-info="item" :key="item.key" />
      </template>
    </template>
  </a-sub-menu>
</template>

<script setup>
const props = defineProps({
  menuInfo: {
    type: Object,
    default: () => ({}),
  }
})
</script>

<style lang="scss" scoped>

</style>

菜单数据结构，可以嵌套任意层。