【问题标题】: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

    【讨论】:

      猜你喜欢
      • 2012-09-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-04-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多