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

208 篇文章 4 订阅
58 篇文章 1 订阅

需要在每个el-dropdown-item设置:command="beforeHandleCommand

//html部分:
  <el-dropdown size="mini" split-button @click="handleClickDropDown('design', formItem)" @command="changeItem">
      设计
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :command="beforeHandleCommand('publish', formItem)">发布</el-dropdown-item>
        <el-dropdown-item:command="beforeHandleCommand('dead', formItem)">停用</el-dropdown-item>
        <el-dropdown-item :command="beforeHandleCommand('share', formItem)">分享</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

// 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(val)
      break
    case 'dead':
      this.stopFormStructure(val)
      break
    case 'share':
      this.handlePcPreview(val)
      break
    default:
      break
  }
},
releaseFormStructure(value){
  console.log(value);
},

stopFormStructure(value){
  console.log(value);
},
handlePcPreview(vaue){
  console.log(value);
},
 
/**
 * 点击下拉菜单触发
 */
   handleClickDropDown(type, formItem) {
  switch (type) {
    case 'designForm':
      this.handleDesignEdit(formItem)
      break
    default:
      this.handleDesignEdit(formItem)
      break
  }
 
},

点击下拉菜单中的发布选项,结果如下:
在这里插入图片描述

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值