Vue.js - 如何使用元素菜单下拉菜单答案

【问题标题】：Vue.js - how to use element menu dropdownVue.js - 如何使用元素菜单下拉菜单
【发布时间】：2020-05-09 13:47:09
【问题描述】：

我是 Vue 的新手。

我正在尝试使用下拉菜单元素。

  <el-dropdown trigger="click">
     <span class="el-dropdown-link">
        <i class="el-icon-more" />
      </span>
     <el-dropdown-menu slot="dropdown">
         <el-dropdown-item icon="el-icon-edit" @click="dialogFormVisible = true">Edit</el-dropdown-item>
         <el-dropdown-item icon="el-icon-circle-delete" @click="dialogVisible = true">Delete</el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>

我想显示一个编辑按钮和一个删除按钮。出于某种原因，当我单击图标时没有任何反应。我不确定应该怎样激活它 - 显示这些按钮。

有什么建议吗？

【问题讨论】：

标签： vue.js element-io

【解决方案1】：

它不能直接工作，你必须使用命令。

  <el-dropdown trigger="click" @command="handleCommand">
     <span class="el-dropdown-link">
        <i class="el-icon-more" />
     </span>
     <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-edit" command="a">Edit</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-delete" command="b">Delete</el-dropdown-item>
     </el-dropdown-menu>
  </el-dropdown>

然后定义handleCommand如下

handleCommand(command) {
   if (command === 'a') {
      this.dialogFormVisible = true;
   }
   if (command === 'b') {
      this.dialogVisible = true;
   }
}

您可以在此处了解更多信息https://element.eleme.io/#/en-US/component/dropdown#dropdown

【讨论】：