您现在的位置是:网站首页> 编程资料编程资料
elementUI中el-dropdown的command实现传递多个参数_vue.js_
2023-05-24
324人已围观
简介 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
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- js中yield参数应用示例深入理解_JavaScript_
- 手把手带你安装vue-cli并创建第一个vue-cli应用程序_vue.js_
- 实现一个Vue版Upload组件_vue.js_
- vue elementui二次封装el-table带插槽问题_vue.js_
- JS实现Tab栏切换的两种方式案例详解_javascript技巧_
- Axios+Spring Boot实现文件上传和下载_javascript技巧_
- vue.config.js完整配置教程_vue.js_
- element中el-table中的el-input校验的实现_vue.js_
- uniapp实现附近商家定位的示例代码_javascript技巧_
- JavaScript实现简单的音乐播放器_javascript技巧_
