您现在的位置是:网站首页> 编程资料编程资料

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

2023-05-24 323人已围观

简介 elementUI中el-dropdown的command实现传递多个参数_vue.js_

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

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

实现方法

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

1. HTML部分

设计

       发布     停用     分享   

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

 {{ dropdownName }} 
{{ item.name }}

js

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

-六神源码网