elementUI中el-dropdown的command实现传递多个参数

 更新时间:2022年08月15日 09:11:24   作者:chujian0325  
这篇文章主要介绍了elementUI中el-dropdown的command实现传递多个参数方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

el-dropdown的command如何传递多个参数

el-dropdown的command事件默认传递一个参数,即每个下拉选项el-dropdown-item中设定的command的值,那么如何传递多个参数呢?

实现方法

动态设置el-dropdown-item中的command值

1. HTML部分

<el-dropdown size="mini" split-button @click="handleClickDropDown('design', formItem)" @command="changeItem">

设计

  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item v-if="formItem.status !== 2" :command="beforeHandleCommand('publish', formItem)">发布</el-dropdown-item>
    <el-dropdown-item v-if="formItem.status === 2" :command="beforeHandleCommand('dead', formItem)">停用</el-dropdown-item>
    <el-dropdown-item :command="beforeHandleCommand('share', formItem)">分享</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

2. JS部分

/**
 * 动态设置Dropdown的command
 */
beforeHandleCommand(flag, command) { // flag为传递的参数
  return {
     'flag': flag,
     'command': command
  }
},
/**
 * 点击下拉菜单每一项时触发
 */
changeItem(val) { // val.flag为传递的flag即'publish'等,val.command为传递的formItem
  const formItem = val.command
  switch (val.flag) {
    case 'publish':
      this.releaseFormStructure(formItem)
      break
    case 'dead':
      this.stopFormStructure(formItem)
      break
    case 'share':
      this.handlePcPreview(formItem)
      break
    default:
      break
  }
},
 
/**
 * 点击下拉菜单触发
 */
handleClickDropDown(type, formItem) {
  switch (type) {
    case 'designForm':
      this.handleDesignEdit(formItem)
      break
    default:
      this.handleDesignEdit(formItem)
      break
  }
},

elementUI下拉command传递多参数事件封装

问题产生

command事件中默认传递一个参数,即你每个下拉选项el-dropdown-item中设定的command的值,怎么样传递多个参数呢?

我的项目中el-dropdown在一个遍历循环中,需要将index角标将参数传给@command="handleCommand"事件中。

解决办法

动态设置每个el-dropdown-item中command的值

效果图:

效果:下拉框选中后,el-dropdown-link显示选中的信息,并且弹一下消息,内容为选中的id。

在这里插入图片描述

vue

<el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    {{ dropdownName }}
    <i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <div v-for="item in matchList">
      <el-dropdown-item :command="beforeHandleCommand(item.id,item.name)"> {{ item.name }}</el-dropdown-item>
    </div>
  </el-dropdown-menu>
</el-dropdown>

js

<script>
  export default {
    data() {
      return {
        tableData: [{
          pk_id: 1,
          mname: '中国机设',
          mtype: '计算机',
          date: '2016-05-02',
          name: '燕山大学',
        }, {
          pk_id: 2,
          mname: '蓝桥杯',
          mtype: '计算机',
          date: '2016-05-02',
          name: '河北大学',
        }],
        dropdownName: "下拉菜单",
        matchList: [{
          id: 1,
          name: "燕山大学"
        }, {
          id: 2,
          name: "河北大学"
        }, ],
      }
    },
    methods: {
      handleCommand(command) {
        console.log(command);
        this.dropdownName=command.command;
        this.$message("id:"+command.index);
      },
      beforeHandleCommand(index, command) { //index我这里是遍历的角标,即你需要传递的额外参数
        return {
          'index': index,
          'command': command
        }
      },
    }
  }
</script>

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

相关文章

  • vue2 elementui if导致的rules判断失效的解决方法

    vue2 elementui if导致的rules判断失效的解决方法

    文章讨论了在使用Vue2和ElementUI时,将if语句放在el-form-item内导致rules判断失效的问题,并提出了将判断逻辑移到外部的解决方案,感兴趣的朋友一起看看吧
    2024-12-12
  • vue实现At人文本输入框示例详解

    vue实现At人文本输入框示例详解

    这篇文章主要为大家介绍了vue实现At人文本输入框示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Vue实现自定义字段导出EXCEL的示例代码

    Vue实现自定义字段导出EXCEL的示例代码

    这篇文章主要介绍了Vue实现自定义字段导出EXCEL的示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • VUE3开箱即用的音频播放组件完整代码(基于原生audio)

    VUE3开箱即用的音频播放组件完整代码(基于原生audio)

    Vue3开箱即用的框架有很多选择,下面这篇文章主要介绍了VUE3开箱即用的音频播放组件(基于原生audio)的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • vue实现的多页面项目如何优化打包的步骤详解

    vue实现的多页面项目如何优化打包的步骤详解

    这篇文章主要介绍了vue实现的多页面项目如何优化打包的步骤详解,文中通过示例代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-07-07
  • vue组件之间数据传递的方法实例分析

    vue组件之间数据传递的方法实例分析

    这篇文章主要介绍了vue组件之间数据传递的方法,结合实例形式分析了vue.js父组件与子组件之间数据传递相关操作技巧,需要的朋友可以参考下
    2019-02-02
  • Vue-Access-Control 前端用户权限控制解决方案

    Vue-Access-Control 前端用户权限控制解决方案

    Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案。这篇文章主要介绍了Vue-Access-Control:前端用户权限控制解决方案,需要的朋友可以参考下
    2017-12-12
  • Vuejs2 + Webpack框架里,模拟下载的实例讲解

    Vuejs2 + Webpack框架里,模拟下载的实例讲解

    今天小编就为大家分享一篇Vuejs2 + Webpack框架里,模拟下载的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue2中前端实现语音播报的详细过程

    vue2中前端实现语音播报的详细过程

    vue中语音播报,目前本人写的过程中,遇到了两种情况,第一种是后端直接返回一个mp3的播放url,第二种就是播报的内容需要前端自己拼接的,关于两种方法,我都说一下如何实现,感兴趣的朋友一起看看吧
    2024-07-07
  • 解决vue单页面修改样式无法覆盖问题

    解决vue单页面修改样式无法覆盖问题

    这篇文章主要介绍了vue单页面修改样式无法覆盖问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08

最新评论