Dropdown 下拉菜单中点击事件失效 el-dropdown-item 内的 @click点击无效

最新推荐文章于 2025-03-17 17:58:34 发布

AmbroseLe

最新推荐文章于 2025-03-17 17:58:34 发布

阅读量2.2k

点赞数 1

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_32786139/article/details/115464491

版权

vue 专栏收录该内容

22 篇文章

订阅专栏

在遇到Dropdown下拉菜单中el-dropdown-item的点击事件不起作用时，可以尝试将@click修改为@click.native，或者使用@command指令来触发方法。这两种方法可能帮助修复点击事件失效的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种就是把@click 改为 @click.native

如果不行的话就使用指令 @command

写法

        <el-dropdown
            trigger="click"
            @command="handleCommand"
            placement="bottom-end"
            style="margin-left: 10px"
          >
            <span class="el-dropdown-link">
              <i class="el-icon-s-tools"></i
              ><i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                :command="beforeHandleCommand('handleEditBatchLog', scope.row)"
                icon="el-icon-edit"
                >修改</el-dropdown-item
              >
              <el-dropdown-item icon="el-icon-circle-plus-outline"
                >添加场次</el-dropdown-item
              >
              <el-dropdown-item icon="el-icon-upload2"
                >导入图片</el-dropdown-item
              >
              <el-dropdown-item style="color: red" icon="el-icon-delete"
                >删除</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>

然后方法使用

beforeHandleCommand(methodName, value) {
      return {
        methodName: methodName,
        value: value,
      };
    },
    handleCommand(command) {
      if (command.methodName === "handleEditBatchLog") {
        //这里就是你要进行的操作了
        this.handleEditBatchLog(command.value);
      }
    },