在 Ant Design
Vue 的
Menu 组件中，三级菜单默认情况下是不会展开的，需要用户手动
点击才能展开。如果想要实现三级菜单展开不会自动折叠，可以考虑通过编写自定义的
Menu 组件来实现。
具体实现步骤如下：
1. 创建一个自定义的
Menu 组件，继承 Ant Design
Vue 的
Menu 组件。
```javascript
import {
Menu } from 'ant-design-
vue';
export default {
name: 'Custom
Menu',
extends:
Menu,
// ...
};
```
2. 在组件的 data 中添加一个变量，用于存储当前展开的菜单项的 key 数组。
```javascript
export default {
// ...
data() {
return {
// 存储当前展开的菜单项的 key 数组
openKeys: [],
};
},
// ...
};
```
3. 实现
Menu 组件的 open-change 事件处理方法，用于更新 openKeys 数组的值。
```javascript
export default {
// ...
methods: {
handle
MenuOpenChange(openKeys) {
this.openKeys = openKeys;
},
},
// ...
};
```
4. 在
Menu 组件的模板中，将 openKeys 数组绑定到
Menu 组件的 openKeys 属性上。
```html
<template>
<a-
menu :open-keys="openKeys" @open-change="handle
MenuOpenChange">
<slot></slot>
</a-
menu>
</template>
```
5. 在
Menu.
Item 组件上添加一个 slot-scope 属性，用于获取当前菜单项的 key。
```html
<a-
menu-
item v-for="
item in
menuData" :key="
item.key" :data="
item">
<template slot-scope="{ key }">
{{
item.title }}
<custom-
menu v-if="
item.children" :
menu-data="
item.children" :default-open-keys="[key]">
<template slot-scope="{ key }">
<a-
menu-
item v-for="child in
item.children" :key="child.key" :data="child">
{{ child.title }}
</a-
menu-
item>
</template>
</custom-
menu>
</template>
</a-
menu-
item>
```
6. 创建一个 Custom
Menu 组件，继承 Ant Design
Vue 的
Menu 组件，并将其作为三级菜单的容器组件。
```javascript
import {
Menu } from 'ant-design-
vue';
export default {
name: 'Custom
Menu',
extends:
Menu,
// ...
};
```
7. 在 Custom
Menu 组件的 data 中添加一个变量，用于存储当前展开的菜单项的 key 数组。
```javascript
export default {
// ...
data() {
return {
// 存储当前展开的菜单项的 key 数组
openKeys: [],
};
},
// ...
};
```
8. 实现 Custom
Menu 组件的 open-change 事件处理方法，用于更新 openKeys 数组的值。
```javascript
export default {
// ...
methods: {
handle
MenuOpenChange(openKeys) {
this.openKeys = openKeys;
},
},
// ...
};
```
9. 在 Custom
Menu 组件的模板中，将 openKeys 数组绑定到
Menu 组件的 openKeys 属性上。
```html
<template>
<a-
menu :open-keys="openKeys" @open-change="handle
MenuOpenChange">
<slot></slot>
</a-
menu>
</template>
```
10. 最后，在
Menu.
Item 组件上添加一个 slot-scope 属性，用于获取当前菜单项的 key，并将其传递给 Custom
Menu 组件。
```html
<a-
menu-
item v-for="
item in
menuData" :key="
item.key" :data="
item">
<template slot-scope="{ key }">
{{
item.title }}
<custom-
menu v-if="
item.children" :
menu-data="
item.children" :default-open-keys="[key]">
<template slot-scope="{ key }">
<a-
menu-
item v-for="child in
item.children" :key="child.key" :data="child">
{{ child.title }}
</a-
menu-
item>
</template>
</custom-
menu>
</template>
</a-
menu-
item>
```
这样，就可以实现三级菜单展开不会自动折叠的效果了。
在使用 Ant Design Vue 2.2.8 版本时，遇到使用 v-if 指令导致的问题，该问题表现为预期行为与实际不符。通过替换为 v-show 可以暂时解决问题，但要注意 v-show=false 时不完全隐藏。推荐使用 Dropdown 组件作为替代方案，以避免此类问题。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
