antdesign vue 2.0 递归菜单_Vue 和递归组件

Ant Design Vue 2.0 提供了一个递归组件 `a-tree`，可以用来实现递归菜单。

首先，需要在组件中引入 `a-tree` 组件：

<template>
  <a-tree :tree-data="treeData">
    <template v-slot="{data}">
      <span>{{ data.title }}</span>
    </template>
  </a-tree>
</template>

<script>
import { ATree } from 'ant-design-vue'

export default {
  name: 'RecursiveMenu',
  components: {
    ATree
  },
  data() {
    return {
      treeData: [
        {
          title: 'Menu 1',
          key: '1',
          children: [
            {
              title: 'Submenu 1-1',
              key: '1-1',
              children: [
                {
                  title: 'Sub-submenu 1-1-1',
                  key: '1-1-1'
                },
                {
                  title: 'Sub-submenu 1-1-2',
                  key: '1-1-2'
                }
              ]
            },
            {
              title: 'Submenu 1-2',
              key: '1-2'
            }
          ]
        },
        {
          title: 'Menu 2',
          key: '2',
          children: [
            {
              title: 'Submenu 2-1',
              key: '2-1'
            },
            {
              title: 'Submenu 2-2',
              key: '2-2'
            }
          ]
        }
      ]
    }
  }
}
</script>

在 `treeData` 中定义了一个递归菜单的数据结构，其中每个菜单项都有一个 `title` 和一个 `key`，以及可能有 `children`，用于定义子菜单。在模板中，使用 `a-tree` 组件来渲染递归菜单，并使用插槽来定义每个菜单项的渲染方式。

在 `a-tree` 组件中，使用 `tree-data` 属性来传递菜单数据。在插槽中，使用 `data` 对象来获取当前菜单项的数据，其中包含菜单项的 `title`、`key`、`children` 等信息。

通过这种方式，就可以实现一个简单的递归菜单。需要注意的是，`a-tree` 组件本身提供了许多属性和事件，可以用来控制菜单的交互方式，例如菜单的展开、收起、选中等。具体使用方式可以参考 Ant Design Vue 2.0 官方文档。