在 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>
```
这样，就可以实现三级
菜单展开不会自动折叠的效果了。
854
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
