Element Plus导航栏同时展开open和select方法的问题

Element Plus导航栏同时展开open和select方法的问题

问题描述

使用vue3+element plus中的导航栏el-menu时，第一次点击菜单的一级目录（无子目录）时，会同时触发open方法和select方法。
我们希望的是，点击有子目录的一级目录时，会展开子目录，执行open方法，点击没有子目录的一级目录时，执行selcet方法。element ui是没有这个问题的，只针对element plus（v2.2.14），后续版本是否会修复我不知道。
目前网上还没有解决这个问题的办法，绝大多数人不会遇到这个问题是因为大部分人不会在open方法中执行内容，只把它当做展开子菜单的步骤而已。但是，如果你想在open方法中执行跳转至页面A，然后select方法执行跳转至页面B时，就会冲突。


如图，点击主页，控制台先执行了一次select，又执行了一次open方法。
再次强调，只有第一次点击会有这个bug，每个目录都点击一遍后，就正常了。而且只有第一级目录有这个bug，后续嵌套都正常。

解决方法

直接说目前为止有效的解决办法，试错过程在后面写。
设置一个flag防止select和open同时触发（BUG问题是会先触发select后触发open）

// temlate部分
<el-menu default-active="2":collapse="isCollapse" @open="handleOpen" @select="handleSelect" @close="handleClose">
	<el-menu-item index="1">
    	<template #title>一级目录1</template>
	</el-menu-item>
	<el-sub-menu index="2">
    	<template #title>
    		<span>一级目录2</span>
    	</template>
    	<el-menu-item index="2-1">二级目录</el-menu-item>
	</el-sub-menu>
</el-menu>

然后

// script部分
<script setup lang="ts">
//...导入等部分省了
const flag = ref(false)
const handleSelect = (key: string, keyPath: string[]) => {
  console.log("select", key, keyPath);
  flag.value = true
  //...添加触发select事件的逻辑
  setTimeout(() => {
    flag.value = false
  }, 200);
};
const handleOpen = (key: string, keyPath: string[]) => {
  if (!flag.value) {
    console.log("open", key, keyPath);
    //...添加open事件逻辑
  }
};
</script>

搞定。
flag作用就是不让select事件触发的短时间内再触发open，注意，要用延时函数将flag重置。

试错过程

1.使用router模式，单纯使用router模式并不能解决这个问题，最终还是要走到配合上面解决方法的路上；
2.也可以在方法内判断该级目录是否有子菜单，即children，但是每次点击都要执行一遍深层遍历，并不是个好办法；
3.目前发现只有一级目录会有这个问题，那么只要在第一级目录的index加上特殊标识就可以。这种方法也可以，但是通常遇到这个问题的，大部分都将目录存到后台去了，而且很多还需要修改目录内容，这种方式要和后台商量好标识符逻辑。