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>
js
<script>
export default {
data() {
return {
tableData: [{
pk_id: 1,
mname: '中國(guó)機(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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用Vue3創(chuàng)建多布局系統(tǒng)的三種方法
布局是中大型網(wǎng)站或應(yīng)用的基礎(chǔ),假設(shè)你正在創(chuàng)建一個(gè)網(wǎng)頁(yè)應(yīng)用,它包括主頁(yè)、營(yíng)銷頁(yè)面和應(yīng)用頁(yè)面,你不會(huì)想要為每一頁(yè)重復(fù)所有的工作,對(duì)吧,與Nuxt不同,Vue 3并沒有內(nèi)置的布局系統(tǒng),但是別擔(dān)心,這里將向你展示3種簡(jiǎn)單的方法來(lái)實(shí)現(xiàn)這一點(diǎn),需要的朋友可以參考下2023-08-08
vue?禁止重復(fù)點(diǎn)擊發(fā)送多次請(qǐng)求的實(shí)現(xiàn)
本文主要介紹了vue?禁止重復(fù)點(diǎn)擊發(fā)送多次請(qǐng)求的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
這篇文章主要介紹了vue2項(xiàng)目中全局封裝axios問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
本篇文章來(lái)講解渲染函數(shù) & JSX，Vue 推薦在絕大多數(shù)情況下使用模板來(lái)創(chuàng)建你的 HTML。然而在一些場(chǎng)景中，你真的需要 JavaScript 的完全編程的能力。這時(shí)我們可以用渲染函數(shù)，它比模板更接近編譯器,需要的朋友可以參考一下2021-09-09
基于vue.js中關(guān)于下拉框的值默認(rèn)及綁定問題
今天小編就為大家分享一篇基于vue.js中關(guān)于下拉框的值默認(rèn)及綁定問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-08-08
vue實(shí)現(xiàn)el-table點(diǎn)選和鼠標(biāo)框選功能的方法
在Vue中我們經(jīng)常需要處理表格數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)el-table點(diǎn)選和鼠標(biāo)框選功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
vue3+vite:src使用require動(dòng)態(tài)導(dǎo)入圖片報(bào)錯(cuò)的最新解決方法
這篇文章主要介紹了vue3+vite:src使用require動(dòng)態(tài)導(dǎo)入圖片報(bào)錯(cuò)和解決方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue中如何使用math.js問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
由于一些演示需要對(duì)一些簡(jiǎn)單頁(yè)面進(jìn)行配置,由于打包build后的vue項(xiàng)目基本已經(jīng)看不出原樣,因此需要?jiǎng)?chuàng)建一個(gè)文件,并在打包的時(shí)候不會(huì)進(jìn)行編譯,所以文件放在public,下面這篇文章主要給大家介紹了關(guān)于vue引用public目錄下文件的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue+element表格導(dǎo)出為Excel文件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09