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

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 ;
      // }
      return icon;

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) {