Vue之elementUI下拉菜单dropdown组件中command方法添加额外参数方式

 更新时间:2025年06月03日 09:54:55   作者:A-sleep  
这篇文章主要介绍了Vue之elementUI下拉菜单dropdown组件中command方法添加额外参数方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

elementUI下拉菜单dropdown组件中command方法添加额外参数

在使用dropdown组件的时候,需要的参数可能很多,不仅仅是command一个参数。

这就需要通过composeValue构造一个结构了

<el-dropdown @command="handleCommand">

<el-dropdown-menu slot="dropdown">

<template v-for="item in items">

     <el-dropdown-item v-for="it in item " :command="composeValue(it,scope.row)"/>

</template>

</el-dropdown-menu>

</el-dropdown>


//方法部分的处理
    handleCommand(command) {
      console.log(command)
    },
    composeValue(item, id) {
      return {
        button: item,
        id: id
      }
    }

打印结果

  • table中

      <el-table-column label="操作" width="250" fixed="right">
        <template slot-scope="scope">
          <el-button type="success" @click.stop="goPutin(scope.row)"
            >编辑投放列表</el-button
          >
          <el-dropdown
            @command="(command) => handleCommand(command, scope.row)"
          >
            <el-button type="primary"
              >更多菜单<i class="el-icon-arrow-down el-icon--right"></i
            ></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="remake">备注</el-dropdown-item>
              <el-dropdown-item command="edit">编辑产品</el-dropdown-item>
              <el-dropdown-item command="changeSort">排序</el-dropdown-item>
              <el-dropdown-item command="remove">删除</el-dropdown-item>
              <el-dropdown-item command="overHz">{{
                scope.row.productCooperation == 1 ? "终止合作" : "恢复合作"
              }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>


<script>
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "remake":
          this.remake(row);
          break;
        case "edit":
          this.edit(row);
          break;
        case "changeSort":
          this.changeSort(row);
          break;
        case "remove":
          this.remove(row);
          break;
        case "overHz":
          this.overHz(row);
          break;
        default:
          break;
      }
    },


    edit(row) {
      this.$nextTick(() => {
        this.productId = row.productId;
        this.goodsType = "edit";
        this.$refs.goodsAdd.dialogVisible = true;
      });
    },
</script>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue 封装面包屑组件教程

    vue 封装面包屑组件教程

    这篇文章主要介绍了vue 封装面包屑组件教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue中使用echarts以及简单关系图的点击事件方式

    vue中使用echarts以及简单关系图的点击事件方式

    这篇文章主要介绍了vue中使用echarts以及简单关系图的点击事件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • 利用vue+elementUI实现部分引入组件的方法详解

    利用vue+elementUI实现部分引入组件的方法详解

    这篇文章主要给大家介绍了关于利用vue+elementUI实现部分引入组件的相关资料,以及介绍了vue引入elementUI报错的解决方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2017-11-11
  • vue input输入框关键字筛选检索列表数据展示

    vue input输入框关键字筛选检索列表数据展示

    这篇文章主要为大家详细介绍了vue input输入框关键字筛选检索列表数据展示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • vue3使用localStorage实现登录注册功能实例

    vue3使用localStorage实现登录注册功能实例

    这篇文章主要给大家介绍了关于vue3使用localStorage实现登录注册功能的相关资料, localStorage这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题,需要的朋友可以参考下
    2023-06-06
  • Vue中点击active并第一个默认选中功能的实现

    Vue中点击active并第一个默认选中功能的实现

    这篇文章主要介绍了Vue中点击active并第一个默认选中功能的实现代码,代码简单易懂,非常不错具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • Axios学习笔记之使用方法教程

    Axios学习笔记之使用方法教程

    axios是用来做数据交互的插件,最近正在学习axios,所以想着整理成笔记方便大家和自己参考学习,下面这篇文章主要跟大家介绍了关于Axios使用方法的相关资料,需要的朋友们下面来一起看看吧。
    2017-07-07
  • vue3使用Electron打包成exe的方法与打包报错解决

    vue3使用Electron打包成exe的方法与打包报错解决

    在前端开发中,Electron是一种常用的工具,它允许开发者使用Web技术构建桌面应用程序,本文主要介绍了vue3使用Electron打包成exe的方法与打包报错解决,具有一定的参考价值,感兴趣的可以了解一下
    2024-06-06
  • Vue 中v-model的完整用法及原理

    Vue 中v-model的完整用法及原理

    本文主要介绍了Vue 中v-model的完整用法及原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • Vue通过getAction的finally来最大程度避免影响主数据呈现问题

    Vue通过getAction的finally来最大程度避免影响主数据呈现问题

    这篇文章主要介绍了Vue通过getAction的finally来最大程度避免影响主数据呈现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04

最新评论