ant-design-vue导航菜单a-menu的使用解读_vue.js_

此文章包含了递归生成三级菜单，刷新状态保留，只展开一个父级菜单等常见问题。

一、效果

可以看到递归生成三级菜单，刷新状态保留，只展开一个父级菜单等常见问题得以解决。我自己的电脑设备老旧，反应缓慢的问题请忽略。

二、关键的API

说实话遇到问题了不知道该怎么解决，说白了还是不懂得API的使用，对相关的API不够了解，熟悉了API怎么操作都行。下面说说用到但是又容易混淆的API。

1.defaultSelectedKeys 默认选中的key

这里的key对应的是a-menu-item上面绑定的key，如果被选中，会进行导航的跳转以及被给予高亮状态。

2.openKeys 展开的a-sub-menu的key

这里的key对应的是a-sub-menu上面绑定的key。如果绑定在a-menu上，对应的子菜单会打开。

3.selectedKeys 受控选中的key

这里的key对应的是a-menu-item上面绑定的key，如果被选中，会进行导航的跳转以及被给予高亮状态。

与defaultSelectedKeys 有什么区别：

• 这两个属性为二选一使用，如果同时使用时，defaultSelectedKeys无效，将会以selectedKeys为准。
• 如果你只是希望指定一个初始化选中的菜单项，请使用defaultSelectedKeys；
• 如果你需要每次通过传入不同的props改变Menu组件的选中项，请使用selectedKeys。

三、注意事项

此处强调一点，如果是一级以及二级菜单的生成，普通的两层for循环结合递归以及v-if生成即可。

如果是想使用a-menu生成三级或者三级以上的菜单，那么就需要定义在单文件内定义函数式组件。那为什么不推荐单文件的形式定义组件，而是使用函数式组件？

以下是官方文档的说明：

四、代码

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！