element-ui中下拉command传递多参数事件封装

Posted 2022-05-18 流楚丶格念

文章目录

• 问题产生
• 解决办法：
• • 效果图：
  • vue
  • js

问题产生

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>

js

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