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

Bree ·

更新时间:2024-09-20

· 920 次阅读

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

实现方法

elementUI下拉command传递多参数事件封装

问题产生

解决办法

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

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

elementUI下拉command传递多参数事件封装 问题产生

command事件中默认传递一个参数，即你每个下拉选项el-dropdown-item中设定的command的值，怎么样传递多个参数呢？

我的项目中el-dropdown在一个遍历循环中，需要将index角标将参数传给@command="handleCommand"事件中。

解决办法

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

效果图：

效果：下拉框选中后，el-dropdown-link显示选中的信息，并且弹一下消息，内容为选中的id。

vue

<el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    {{ dropdownName }}
    <i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <div v-for="item in matchList">
      <el-dropdown-item :command="beforeHandleCommand(item.id,item.name)"> {{ item.name }}</el-dropdown-item>
    </div>
  </el-dropdown-menu>
</el-dropdown>

<script>
  export default {
    data() {
      return {
        tableData: [{
          pk_id: 1,
          mname: '中国机设',
          mtype: '计算机',
          date: '2016-05-02',
          name: '燕山大学',
        }, {
          pk_id: 2,
          mname: '蓝桥杯',
          mtype: '计算机',
          date: '2016-05-02',
          name: '河北大学',
        }],
        dropdownName: "下拉菜单",
        matchList: [{
          id: 1,
          name: "燕山大学"
        }, {
          id: 2,
          name: "河北大学"
        }, ],
      }
    },
    methods: {
      handleCommand(command) {
        console.log(command);
        this.dropdownName=command.command;
        this.$message("id："+command.index);
      },
      beforeHandleCommand(index, command) { //index我这里是遍历的角标，即你需要传递的额外参数
        return {
          'index': index,
          'command': command
        }
      },
    }
  }
</script>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。

command 参数

1024 个赞