antd(ant design) 多级菜单时 subMenu无法展开的问题

Posted 2021-10-09 大侦探阿毛

在写多级菜单时碰到了这样一个问题
在使用a-menu、sub-menu创建多级菜单时，如果有sub-menu的多级嵌套，此时在a-menu中设置openKeys，想要展开sub-menu中的sub-menu，如果像原来二级嵌套一样，只写this.openKeys= ["1-1-1"];是无法正确的展开默认菜单的。

<template>
  <a-menu>
    <a-menu-item :openKeys.sync="openKeys">菜单项</a-menu-item>
    <a-sub-menu title="子菜单1-1" key="1-1">
      <a-menu-item>子菜单项</a-menu-item>
      <a-sub-menu title="子菜单1-1-1" key="1-1-1">
           <a-menu-item>子菜单项</a-menu-item>
      </a-sub-menu>
    </a-sub-menu>
  </a-menu>
</template>

this.openKeys= ["1-1-1"]; //无法展开

可以看到官方文档中，给到的openKeys是一个数组，所以正确的写法是：

this.openKeys= ["1-1","1-1-1"];

这样就可以正确的展开多级子菜单了。