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
}
},
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
