【已解决】ElementPlus 的 el-menu 组件如何用 js 控制展开某个子菜单，并在其他组件中控制使用呢？

文章目录

• 需求
• 几次探索
• 官网寻找线索（解决办法）

需求

我如何用代码来实现 ElementPlus 的菜单的展开和收缩呢？

几次探索

• 尝试通过找到节点之后，使用 click 事件，失败了

  // 伪代码如下
  const handleFindNodeAndClick = () => {
      console.log('handleFindNodeAndClick');
      const node:any = document.querySelector('.el-menu')
      console.log('node:>>', node);
      if (node) {
          const children = node.children;
          console.log('children:>>', children);
          children[2].click()
      }
  }
  

• 尝试模拟鼠标点击事件，失败了

  // 大致思路如下
  const menuItem = document.querySelector('.menu-item');
  
  // 创建一个鼠标事件
  const event = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window
  });
  
  // 派发鼠标事件
  menuItem.dispatchEvent(event);
  

官网寻找线索（解决办法）

不得已去官网上翻翻看，看到个这个 Menu Exposes，看着说明很像是我的需求啊，但是不太会用呢

然后，我来到了这个后台管理框架的 Layout 找到了这个组件，找到了这个组件，打印了它的 ref 一看！

在浏览器里看看

可以简单测试一下

效果出来了

那么可以把这个 ref 放到 Store 里，然后在其他组件中拿到这个 菜单的实例，即可全局调用这个方法了！