2

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

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/

4

2 回答 2

0

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 值以编程方式打开/关闭菜单，或直接分配给真或假状态。

于 2018-08-08T17:38:51.117 回答
0

我不知道这是否是最好的解决方案，但您可以为元素添加一个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

于 2018-08-08T16:14:10.947 回答