期望:左侧一级菜单都默认展开
试了很多网上的方法,比如在 defaultSettings.js
中设置 openKeys: false
,都不管用,后来自己摸索出了一种解决方案,如下。
-
打开
src/layouts/BasicLayout.vue
-
在data中添加
openKeys
为undefined
占位
data() {
// ...
openKeys: undefined
// ...
}
- 在
created
生命周期中找到路由赋值的语句,在下面添加一条语句
this.settings.openKeys = this.menus.filter((item) => item.children !== undefined).map((item2) => item2.name)
// ...
created () {
const routes = this.mainMenu.find(item => item.path === '/')
this.menus = (routes && routes.children) || []
// 添加的语句开始
this.settings.openKeys = this.menus.filter((item) => item.children !== undefined).map((item2) => item2.name)
// 添加的语句结束
// ...
原理就是遍历一遍路由列表,将其中有 children
属性的菜单项找出来 (也就是有二级菜单的一级菜单项),然后将他们的 name
属性提取出来收集到一个 数组里即可。(因为它是把name属性当作 key 的)
最后,重新 启动服务即可生效,看到效果。