How to use the ant-design-vue.Menu.Item function in ant-design-vue

props: {
    collapsed: { default: false, type: Boolean },
    theme: { default: "dark", type: String },
    layout: { type: String },
    mode: { default: "inline", type: String },
    styles: { type: String }
  },
  computed: {
    ...mapGetters({
        loading: "global/nav/loading",
        menuData: "global/nav/getMenuData",
    }),
    },
  components: {
    AMenu: Menu,
    AMenuItem: Menu.Item,
    ASubMenu: Menu.SubMenu,
    AMenuDivider: Menu.Divider,
    AMenuItemGroup: Menu.ItemGroup,
    AIcon: Icon
  },
  methods: {
    getIcon(icon) {
      if (typeof icon === "string" && icon.indexOf("http") === 0) {
        return <img class="icon" alt="icon" src="{icon}">;
      }
      if (typeof icon === "string") {
        return ;
      }
      // if(!icon){
      //   return ;
      // }

import Cookies from 'js-cookie';
import { menuItem, routerItem } from '@/interface';
import { routeToArray } from '@/utils';
import MenuList from '@/components/Layout/Sidebar/MenuList';
import './Header.less';

interface breadItem {
  url: string,
  text: string,
}

@Component({
  components: {
    'a-badge': Badge,
    'a-dropdown': Dropdown,
    'a-menu-item': Menu.Item,
    'a-breadcrumb': Breadcrumb,
    'a-breadcrumb-item': Breadcrumb.Item,
    'a-popover': Popover,
    'menu-list': MenuList,
    'a-icon': Icon,
    'a-menu-divider': Menu.Divider,
    'a-menu': Menu,
  },
})
export default class Header extends Vue {
  @Prop() private username!: string;

  // data
  menuData: routerItem[] = [];

  breadList: breadItem[] = [];

import {
  Component, Emit, Vue, Prop, Watch,
} from 'vue-property-decorator';
import { Menu, Icon } from 'ant-design-vue';
import { routerItem } from '@/interface';
import { routeToArray } from '@/utils/index';
import './MenuList.less';

@Component({
  components: {
    'a-menu': Menu,
    'a-submenu': Menu.SubMenu,
    'a-menu-item-group': Menu.ItemGroup,
    'a-menu-item': Menu.Item,
    'a-icon': Icon,
  },
})
export default class MenuList extends Vue {
  @Prop({ default: '#010101' }) private bgColor!: string;

  @Prop({ default: '#fff' }) private txtColor!: string;

  keys: string[] = []

  openKeys: string[] = []

  @Watch('$route', { immediate: true, deep: true })
  routeChange(to: any, from: any) {
    this.keys = routeToArray(to.path).routeArr;
    const open = this.keys.concat();

Component, Prop, Emit, Vue, Inject, Provide,
} from 'vue-property-decorator';
import {
  Popconfirm, Table, Dropdown, Menu, Button, Icon,
} from 'ant-design-vue';
import { tableList, Opreat, Directives } from '@/interface';
import Spin from '@/components/Spin';
import './MTable.less';

@Component({
  components: {
    'a-table': Table,
    'a-popconfirm': Popconfirm,
    'm-spin': Spin,
    'a-dropdown': Dropdown,
    'a-menu-item': Menu.Item,
    'a-menu': Menu,
    'a-button': Button,
    'a-icon': Icon,
  },
})
export default class MTable extends Vue {
  @Prop() private tableList!: tableList[];

  @Prop() private url!: string;

  @Prop() private dataType!: string;

  @Prop({
    default: () => ({
      code: 'result.resultCode',
      codeOK: '0',

import './index.less';

@Component({
  name: 'baseForm',
  components: {
    'a-form': Form,
    'a-form-item': Form.Item,
    'a-input': Input,
    'a-select': Select,
    'a-radio': Radio,
    'a-radio-group': Radio.Group,
    'a-card': Card,
    'a-dropdown': Dropdown,
    'a-menu': Menu,
    'a-menu-item': Menu.Item,
    'a-icon': Icon,
    'a-date-picker': DatePicker,
    'a-button': Button,
    'a-modal': Modal,
  },
  props: {
    Form,
  },
})

class BaseForm extends Vue {
  itemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 8 },
    },