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
  }
},

 

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐