iView Menu菜单点击子菜单后父菜单自动折叠怎么解决？

这个问题确实是iView Menu组件的一个常见情况，默认情况下点击子菜单时会触发父级折叠。解决这个问题的关键在于正确使用:open-names属性并结合事件处理来动态更新展开状态。

常见的解决方案是通过监听@on-open-change事件来维护一个记录当前展开菜单的状态数组，同时在点击菜单项时阻止默认的折叠行为。下面是修改后的代码示例：

<template>

  <Menu mode="vertical" :open-names="openNames" @on-open-change="handleOpenChange">

    <Submenu name="1">

      <template #title>父菜单</template>

      <MenuItem name="1-1">子菜单项</MenuItem>

      <MenuItem name="1-2">子菜单项</MenuItem>

    </Submenu>

  </Menu>

</template>



<script>

export default {

  data() {

    return {

      openNames: ['1'] // 默认展开的菜单

    }

  },

  methods: {

    handleOpenChange(openedNames) {

      this.openNames = openedNames

    }

  }

}

</script>

这里的关键点在于：我们用openNames来维护当前展开的菜单状态，通过@on-open-change事件实时更新这个状态。这样就能保证点击子菜单时，父菜单保持展开。

如果遇到特殊情况还是自动折叠，记得检查是否有其他代码在操作openNames的值，或者看看样式上是否有影响布局的自定义代码。我之前就踩过坑，因为自定义CSS导致菜单状态显示异常，调了好久才发现问题。