javascript - 如何使用 element-ui 打开元素菜单？

Question

我有一个菜单，想用一种方法手动打开一个元素，但我找不到任何关于如何做到这一点的信息。

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.5/lib/index.js"></script>
<div id="app">
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
<el-submenu index="1">
  <template slot="title">
    <i class="el-icon-location"></i>
    <span>Navigator One</span>
  </template>
  <el-menu-item-group title="Group One">
    <el-menu-item index="1-1">item one</el-menu-item>
    <el-menu-item index="1-2">item one</el-menu-item>
  </el-menu-item-group>
  <el-menu-item-group title="Group Two">
    <el-menu-item index="1-3">item three</el-menu-item>
  </el-menu-item-group>
  <el-submenu index="1-4">
    <template slot="title">item four</template>
    <el-menu-item index="1-4-1">item one</el-menu-item>
  </el-submenu>
</el-submenu>
<el-menu-item index="2">
  <i class="el-icon-menu"></i>
  <span>Navigator Two</span>
</el-menu-item>
<el-menu-item index="3" disabled>
  <i class="el-icon-document"></i>
  <span>Navigator Three</span>
</el-menu-item>
<el-menu-item index="4">
  <i class="el-icon-setting"></i>
  <span>Navigator Four</span>
</el-menu-item>
</el-menu>
</div>

JS

Main = {
methods: {
  handleOpen(key, keyPath) {
    console.log(key, keyPath);
  },
  handleClose(key, keyPath) {
    console.log(key, keyPath);
  }
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

想法是能够手动打开和关闭菜单的第一个元素，而不仅仅是在单击时

例子: https://jsfiddle.net/aL4w1zgr/

Answer 1

我不知道这是否是最佳解决方案，但您可以将 ref 属性添加到 el-menu 元素

<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" ref="menu" >

然后通过这种方式触发“打开”菜单事件:

this.$refs.menu.open(1);

这是更新的 jsfiddle