Ant Design的Menu菜单怎么设置选中项后不自动展开子菜单？

UI士懿提问于 2026-02-16 13:29:29 阅读 85

组件

我在用Ant Design的侧边栏菜单时遇到个奇怪的问题。设置了mode为inline，点击父菜单项展开子菜单后，如果直接点击父菜单的选中项，整个子菜单会突然收起来，这让我很困扰。

我尝试过设置defaultOpenKeys和selectedKeys，但发现只要再次点击已选中的父菜单项，子菜单就会自动折叠。有没有办法让选中项保持展开状态呢？


<template>
  <a-menu mode="inline" :selected-keys="[currentKey]" :default-open-keys="['sub1']">
    <a-menu-item key="home">
      首页
    </a-menu-item>
    <a-sub-menu key="sub1">
      <template #title>内容管理</template>
      <a-menu-item key="article">文章列表</a-menu-item>
      <a-menu-item key="category">分类管理</a-menu-item>
    </a-sub-menu>
  </a-menu>
</template>

现在的情况是，当点击”内容管理”展开子菜单后，如果再次点击”内容管理”这个父菜单项，子菜单就会收起来。但用户可能只是想保持当前选中状态，而不是折叠菜单…

我来解答赞 4 收藏

反馈

1 条解答

Newb.春凤 Lv1

这个问题的关键在于 Ant Design 的 Menu 组件在 inline 模式下，点击父菜单项时会默认触发折叠逻辑。要解决这个问题，可以通过控制 openKeys 来手动管理子菜单的展开状态，而不是依赖组件的默认行为。

性能上，我们尽量避免频繁的状态更新，所以可以用一个变量来记录当前展开的子菜单，只在必要时更新。

具体做法是去掉 defaultOpenKeys，改用受控属性 openKeys，并在点击事件中判断是否需要保持展开状态。下面是修改后的代码：

<template>

  <a-menu 

    mode="inline" 

    :selected-keys="[currentKey]" 

    :open-keys="openKeys" 

    @open-change="handleOpenChange">

    <a-menu-item key="home">

      首页

    </a-menu-item>

    <a-sub-menu key="sub1">

      <template #title>内容管理</template>

      <a-menu-item key="article">文章列表</a-menu-item>

      <a-menu-item key="category">分类管理</a-menu-item>

    </a-sub-menu>

  </a-menu>

</template>



<script>

export default {

  data() {

    return {

      currentKey: 'home',

      openKeys: ['sub1'], // 初始展开的子菜单

    };

  },

  methods: {

    handleOpenChange(keys) {

      // 如果点击的是已展开的父菜单项，则保持展开状态

      this.openKeys = keys.length ? keys : this.openKeys;

    },

  },

};

</script>

这里的核心是 @open-change 事件和 openKeys 属性的配合。handleOpenChange 方法会在用户操作菜单时触发，如果返回的 keys 是空数组（表示要折叠），我们就保留原来的 openKeys，从而避免子菜单被意外收起。

这样处理后，用户点击父菜单项时，子菜单不会自动折叠，性能上也避免了不必要的 DOM 操作。如果还有其他需求，比如动态加载子菜单，也可以在这个基础上扩展。

2026-02-16 14:01