ant-design-vue openKeys每次点击时只展开当前菜单,但是点击子菜单时openKeys没有作用。用watch监听没有变化,但是页面收缩了
时间: 2024-03-06 16:49:36 浏览: 15
您可以尝试在`Menu`组件中设置`openKeys`属性为当前展开的菜单项的key值数组,并且在`SubMenu`组件中设置`onTitleClick`事件来更新`openKeys`属性的值。以下是示例代码:
```
<template>
<a-layout :style="{ minHeight: '100vh' }">
<a-layout-sider collapsible :collapsed-width="80" v-model="collapsed">
<div class="logo"></div>
<a-menu :theme="theme" :mode="mode" :selected-keys="[selectedKeys]" :open-keys="openKeys">
<a-sub-menu v-for="menu in menus" :key="menu.key" :title="menu.title" @title-click="handleTitleClick(menu.key)">
<a-menu-item v-for="item in menu.items" :key="item.key">{{ item.title }}</a-menu-item>
</a-sub-menu>
</a-menu>
</a-layout-sider>
<a-layout-content>Content</a-layout-content>
</a-layout>
</template>
<script>
export default {
data() {
return {
theme: 'dark',
mode: 'inline',
collapsed: false,
selectedKeys: '',
openKeys: [],
menus: [
{
key: 'sub1',
title: 'Submenu 1',
items: [
{ key: '1', title: 'Item 1' },
{ key: '2', title: 'Item 2' },
{ key: '3', title: 'Item 3' }
]
},
{
key: 'sub2',
title: 'Submenu 2',
items: [
{ key: '4', title: 'Item 4' },
{ key: '5', title: 'Item 5' },
{ key: '6', title: 'Item 6' }
]
}
]
}
},
methods: {
handleTitleClick(key) {
if (this.openKeys.includes(key)) {
this.openKeys.splice(this.openKeys.indexOf(key), 1)
} else {
this.openKeys.push(key)
}
}
}
}
</script>
```
在上述代码中,我们使用了`openKeys`属性来维护当前展开的菜单项的key值数组,并且在`SubMenu`组件中设置了`onTitleClick`事件来更新`openKeys`属性的值。当用户点击菜单项时,`openKeys`属性的值会相应地更新,并且`Menu`组件会自动展开或收缩子菜单。