Ant Design Vue 菜单刷新后保持菜单选中/点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁

小灰灰 2023-02-18 10:59 13阅读 0赞

#### 1、在刷新后保持菜单选中 ####

antd的API中提供了一个defaultSelectedKeys参数  
描述：初始选中的菜单项 key 数组  
类型： string\[\] 自己手动实验得知意思就是在数组中填入字符串 例如\[‘key’\]  
默认值为空

在菜单标签中设置 defaultSelectedKeys属性指向this.$route.path即可

#### 2、点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁 ####

<template>
      <div>
        <a-menu mode="inline" :open-keys="openKeys" style="width: 256px" @openChange="onOpenChange">
          <a-sub-menu key="sub1">
            <span slot="title"><a-icon type="mail" /><span>Navigation One</span></span>
            <a-menu-item key="1">
              Option 1
            </a-menu-item>
            <a-menu-item key="2">
              Option 2
            </a-menu-item>
            <a-menu-item key="3">
              Option 3
            </a-menu-item>
            <a-menu-item key="4">
              Option 4
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <span slot="title"><a-icon type="appstore" /><span>Navigation Two</span></span>
            <a-menu-item key="5">
              Option 5
            </a-menu-item>
            <a-menu-item key="6">
              Option 6
            </a-menu-item>
            <a-sub-menu key="sub3" title="Submenu">
              <a-menu-item key="7">
                Option 7
              </a-menu-item>
              <a-menu-item key="8">
                Option 8
              </a-menu-item>
            </a-sub-menu>
          </a-sub-menu>
          <a-sub-menu key="sub4">
            <span slot="title"><a-icon type="setting" /><span>Navigation Three</span></span>
            <a-menu-item key="9">
              Option 9
            </a-menu-item>
            <a-menu-item key="10">
              Option 10
            </a-menu-item>
            <a-menu-item key="11">
              Option 11
            </a-menu-item>
            <a-menu-item key="12">
              Option 12
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </div>
    </template>
    <script> export default { data() { return { rootSubmenuKeys: ['sub1', 'sub2', 'sub4'], openKeys: ['sub1'], }; }, methods: { onOpenChange(openKeys) { const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1); if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) { this.openKeys = openKeys; } else { this.openKeys = latestOpenKey ? [latestOpenKey] : []; } }, }, }; </script>