Ant Design of Vue动态生成菜单项

有这样一种情况，

需要<a-sub-menu>和<a-menu-item>共存

混在一起按给出规定顺序排列。

给出如下数据，将其展示在菜单上。

son为空说明当前是一个普通菜单项，不为空，则是一个菜单组。

menus: [
        {id: "001", name: "001", son: []},
        {id: "002", name: "002", son: []},
        {id: "003", name: "003", son: []},
        {id: "004", name: "004", son: []},
        {id: "005", name: "005", son: [
            {id: "0001", name: "0001"},
            {id: "0002", name: "0002"},
          ],
        },
      ],

动态生成组合菜单项方式：

 <template>

  <a-menu id="sidermenus"  mode="inline"  style=" border-right: 0;" >


    <template v-for="item in menus" >

      <a-menu-item v-if="item.son.length<1" :key="item.id">
        <a-icon type="user"/>
        {{item.name}}
      </a-menu-item>


      <a-sub-menu v-if="item.son.length>=1" :key="item.id">
        <span slot="title"><a-icon type="user"/>{{item.name}}</span>
        <a-menu-item v-for="son in item.son" :key="son.id">
          <a-icon type="user"/>{{son.name}}
        </a-menu-item>
      </a-sub-menu>

    </template>


  </a-menu>

 </template>