elementUI中el-dropdown的command實(shí)現(xiàn)傳遞多個(gè)參數(shù)

更新時(shí)間：2022年08月15日 09:11:24 作者：chujian0325

這篇文章主要介紹了elementUI中el-dropdown的command實(shí)現(xiàn)傳遞多個(gè)參數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

el-dropdown的command如何傳遞多個(gè)參數(shù)

el-dropdown的command事件默認(rèn)傳遞一個(gè)參數(shù)，即每個(gè)下拉選項(xiàng)el-dropdown-item中設(shè)定的command的值，那么如何傳遞多個(gè)參數(shù)呢？

實(shí)現(xiàn)方法

動(dòng)態(tài)設(shè)置el-dropdown-item中的command值

1. HTML部分

<el-dropdown size="mini" split-button @click="handleClickDropDown('design', formItem)" @command="changeItem">

設(shè)計(jì)

? <el-dropdown-menu slot="dropdown">
? ? <el-dropdown-item v-if="formItem.status !== 2" :command="beforeHandleCommand('publish', formItem)">發(fā)布</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部分

/**
?* 動(dòng)態(tài)設(shè)置Dropdown的command
?*/
beforeHandleCommand(flag, command) { // flag為傳遞的參數(shù)
? return {
? ? ?'flag': flag,
? ? ?'command': command
? }
},
/**
?* 點(diǎn)擊下拉菜單每一項(xiàng)時(shí)觸發(fā)
?*/
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
? }
},
?
/**
?* 點(diǎn)擊下拉菜單觸發(fā)
?*/
handleClickDropDown(type, formItem) {
? switch (type) {
? ? case 'designForm':
? ? ? this.handleDesignEdit(formItem)
? ? ? break
? ? default:
? ? ? this.handleDesignEdit(formItem)
? ? ? break
? }
},

elementUI下拉command傳遞多參數(shù)事件封裝

問題產(chǎn)生

command事件中默認(rèn)傳遞一個(gè)參數(shù)，即你每個(gè)下拉選項(xiàng)el-dropdown-item中設(shè)定的command的值，怎么樣傳遞多個(gè)參數(shù)呢？

我的項(xiàng)目中el-dropdown在一個(gè)遍歷循環(huán)中，需要將index角標(biāo)將參數(shù)傳給@command="handleCommand"事件中。

解決辦法

動(dòng)態(tài)設(shè)置每個(gè)el-dropdown-item中command的值

效果圖：

效果：下拉框選中后，el-dropdown-link顯示選中的信息，并且彈一下消息，內(nèi)容為選中的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: '中國機(jī)設(shè)',
          mtype: '計(jì)算機(jī)',
          date: '2016-05-02',
          name: '燕山大學(xué)',
        }, {
          pk_id: 2,
          mname: '藍(lán)橋杯',
          mtype: '計(jì)算機(jī)',
          date: '2016-05-02',
          name: '河北大學(xué)',
        }],
        dropdownName: "下拉菜單",
        matchList: [{
          id: 1,
          name: "燕山大學(xué)"
        }, {
          id: 2,
          name: "河北大學(xué)"
        }, ],
      }
    },
    methods: {
      handleCommand(command) {
        console.log(command);
        this.dropdownName=command.command;
        this.$message("id："+command.index);
      },
      beforeHandleCommand(index, command) { //index我這里是遍歷的角標(biāo)，即你需要傳遞的額外參數(shù)
        return {
          'index': index,
          'command': command
        }
      },
    }
  }
</script>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: