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>

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

相关文章

  • 在vue中动态添加class类进行显示隐藏实例

    在vue中动态添加class类进行显示隐藏实例

    今天小编就为大家分享一篇在vue中动态添加class类进行显示隐藏实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue addRoutes路由动态加载操作

    vue addRoutes路由动态加载操作

    这篇文章主要介绍了vue addRoutes路由动态加载操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue navbar tabbar导航条根据位置移动实现定位、颜色过渡动画效果的代码

    vue navbar tabbar导航条根据位置移动实现定位、颜色过渡动画效果的代码

    这篇文章主要介绍了vue navbar tabbar导航条根据位置移动实现定位、颜色过渡动画效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • ejsExcel模板在Vue.js项目中的实际运用

    ejsExcel模板在Vue.js项目中的实际运用

    这篇文章主要介绍了ejsExcel模板在Vue.js项目中的实际运用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • vue利用指令实现快速设置元素的高度

    vue利用指令实现快速设置元素的高度

    在项目中经常有需要将列表的高度设置成剩余可视区域的高度,本文主要来和大家介绍一下如何通过指令和css变量的方式快速设置列表高度,希望对大家有所帮助
    2024-03-03
  • Vue props用法详解(小结)

    Vue props用法详解(小结)

    这篇文章主要介绍了Vue props用法详解(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 详解在Vue中如何实现表单图片裁剪与预览

    详解在Vue中如何实现表单图片裁剪与预览

    在前端开发中,表单提交是一个常见的操作,有时候,我们需要上传图片,但是上传的图片可能会非常大,这会增加服务器的负担,同时也会降低用户的体验,因此,我们通常需要对上传的图片进行裁剪和预览,本文主要给大家介绍如何在Vue中进行表单图片裁剪与预览
    2023-06-06
  • vue阻止页面回退的实现方法(浏览器适用)

    vue阻止页面回退的实现方法(浏览器适用)

    这篇文章主要介绍了vue阻止页面回退的实现方法(浏览器适用),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • Vuejs第十篇之vuejs父子组件通信

    Vuejs第十篇之vuejs父子组件通信

    这篇文章主要介绍了Vuejs第十篇之vuejs父子组件通信的相关资料,本文介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • 详解vue在项目中使用百度地图

    详解vue在项目中使用百度地图

    这篇文章主要介绍了vue在项目中使用百度地图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03

最新评论