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

Answer 2

将collapse属性添加到el-menu：

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

然后添加数据：

Main = {
  data: function () {
    return {
      isCollapse: true
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}

现在，您可以通过编程方式打开/关闭菜单，并切换isCollapse值，或直接将其分配为true或false。

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

2 个答案: