在vue3中使用antdesign4的SubMenu, MenuItem

在Vue3中使用Ant Design Vue (AntD) 的 `SubMenu` 和 `MenuItem`，你需要先安装 AntD 的 Vue 版本。你可以通过npm或yarn进行安装：

npm install @ant-design/icons antd vue@^3.0.0
# 或者
yarn add @ant-design/icons antd vue@^3.0.0

然后在你的Vue组件中引入并使用它们：

<template>
  <template #default>
    <a-menu :default-active-key="['1']" class="menu">
      <a-submenu key="1" title="菜单名称">
        <template slot="title">一级菜单</template>
        <a-menu-item v-for="(item, index) in menuItems" :key="index" :key-as="item.key">
          <span slot="title">{{ item.name }}</span>
        </a-menu-item>
      </a-submenu>
    </a-menu>
  </template>
</template>

<script setup>
import { Menu, SubMenu, MenuItem } from '@ant-design/vue';

const menuItems = [
  {
    key: '1',
    name: '菜单项1',
    children: [
      { key: '1-1', name: '子菜单项1' },
      { key: '1-2', name: '子菜单项2' }
    ]
  },
  // 其他菜单项...
];

const defaultActiveKey = ['1'];

export default {
  components: { Menu, SubMenu, MenuItem },
  setup() {
    return { menuItems, defaultActiveKey };
  }
};
</script>

在这个例子中，我们创建了一个自定义的Vue组件，包含一个 `SubMenu` 节点，其中嵌套了多个 `MenuItem` 来表示二级菜单。`v-for`指令用于遍历 `menuItems` 数组，并动态渲染每个菜单项。