<a-menu :theme="theme" :mode="mode" :open-keys="openKeys" :selected-keys="selectedKeys" @openChange="handleOpenChange" @select="handleSelect" v-bind="dynamicProps" @mouseenter="$emit('mouseenter', $event)" @mouseleave="$emit('mouseleave', $event)"> <template v-for="menu in menus"> <transform-vnode :key="menu.path" v-if="(!menu.children || menu.meta?.hideChildrenInMenu) && !menu.meta?.hideInMenu" :by="customItem" :opt="menu"> <a-menu-item @mouseenter="$emit('itemHover', $event)" :key="menu.path"> <component v-if="menu.meta.icon !== undefined" :is="menu.meta.icon" :key="menu.meta.icon" /> <component v-else-if="collapsed && menu.meta.collapsedIcon !== undefined" :is="menu.meta.collapsedIcon" :key="menu.meta.collapsedIcon" /> <span>{{menu.meta.title}}</span> </a-menu-item> </transform-vnode> <sub-menu :key="menu.path" @itemHover="$emit('itemHover', $event)" v-else-if="menu.children" :menu="menu" :i18n="i18n" :collapsed="collapsed" /> </template> </a-menu> 其中sub-menu来显示二级菜单,但是滑入二级菜单其他二级菜单也会展开
时间: 2023-11-11 10:49:41 浏览: 156
wx-tree:微信小程序中的树形结构
根据你提供的代码,我注意到你使用了 `sub-menu` 组件来显示二级菜单。在 `a-menu` 中的 `sub-menu` 组件中,可能存在一个问题导致滑入二级菜单时其他二级菜单也会展开。
请确保你正确设置了 `sub-menu` 组件的 `:open-keys` 属性,该属性用于控制子菜单的展开状态。你可以根据当前菜单项的 key 值来设置 `:open-keys` 属性,以实现只展开当前滑入的二级菜单。
例如,你可以在 `sub-menu` 组件上添加 `:open-keys="[menu.path]"` 属性,确保只展开当前滑入的二级菜单。
```vue
<sub-menu :key="menu.path" @itemHover="$emit('itemHover', $event)" v-else-if="menu.children" :menu="menu" :i18n="i18n" :collapsed="collapsed" :open-keys="[menu.path]" />
```
请注意,具体实现可能会根据你的代码结构和需求有所变化。如果问题仍然存在,请提供更多相关代码或提供更详细的问题描述,以便我能够更好地帮助你解决问题。
阅读全文