快捷導(dǎo)航

ElementUI中的el-dropdown傳入多參數(shù)的實(shí)現(xiàn)方法

更新時(shí)間：2021年12月13日 16:17:53 作者：Leeeeeer

本文主要介紹了ElementUI中的el-dropdown傳入多參數(shù)的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近工作中因?yàn)闃I(yè)務(wù)中按鈕的增多，導(dǎo)致頁(yè)面排版按鈕過(guò)多，頁(yè)面不夠美觀，用戶體驗(yàn)不佳，于是想到利用el-dropdown做一個(gè)下拉按鈕（把多個(gè)按鈕整合到了一起，下拉實(shí)現(xiàn)）

在這里插入圖片描述

但是ElementUi官方文檔中的handleCommand方法只允許接入一個(gè)參數(shù)，這個(gè)參數(shù)用于觸發(fā)你選擇的是哪一個(gè)選項(xiàng)。而我們實(shí)際中還需要傳入一個(gè)當(dāng)前行數(shù)（如果和我一樣，也是用table顯示數(shù)據(jù)的話）的對(duì)象進(jìn)去，后面要使用這個(gè)對(duì)象的某些字段傳給后臺(tái)進(jìn)行一些增刪改查的操作。

ElementUi官方文檔中el-dropdown的樣例如下：
el-dropdown 官方文檔

<el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    下拉菜單<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="a">黃金糕</el-dropdown-item>
    <el-dropdown-item command="b">獅子頭</el-dropdown-item>
    <el-dropdown-item command="c">螺螄粉</el-dropdown-item>
    <el-dropdown-item command="d" disabled>雙皮奶</el-dropdown-item>
    <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

<script>
  export default {
    methods: {
      handleCommand(command) {
        this.$message('click on item ' + command);
      }
    }
  }
</script>

我們必須在執(zhí)行handleCommand方法之前，對(duì)這個(gè)command參數(shù)進(jìn)行重新封裝成一個(gè)對(duì)象，使其內(nèi)部包含我們想要的數(shù)據(jù)方便后面調(diào)用。

代碼如下：

<el-table-column label="操作1">
    <template slot-scope="scope">
        <el-dropdown split-button type="primary" @command="handleCommand">
            其他操作
            <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'a')">廢棄</el-dropdown-item>
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'b')">上傳原件</el-dropdown-item>
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'c')">原件整理</el-dropdown-item>
                <el-dropdown-item disabled :command="beforeHandleCommand(scope.$index, scope.row,'d')">凍結(jié)</el-dropdown-item>
                <el-dropdown-item disabled :command="beforeHandleCommand(scope.$index, scope.row,'e')">解凍</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </template>
</el-table-column>

因?yàn)槲覀兪菍懺诒砀窭锏?，所以需要一個(gè)插槽，具體的根據(jù)實(shí)際情況進(jìn)行修改。給標(biāo)簽的command屬性綁定一個(gè)方法，這個(gè)方法就可以傳入我們想要的參數(shù)，然后利用這個(gè)方法封裝成一個(gè)對(duì)象，再將這個(gè)對(duì)象傳入handleCommand方法。

<script>
export default {
    methods: {
        handleAbandon(index, row) {
           //todo
        },
        handleUpload (index, row) {
            //todo
        },
        handleSettle(index, row){
           //todo   
        },
        beforeHandleCommand(index, row,command){
            return {
                'index': index,
                'row': row,
                'command':command
            }
        },
        handleCommand(command) {
            switch (command.command) {
                case "a"://廢棄
                    this.handleAbandon(command.index,command.row);
                    break;
                case "b"://上傳原件
                    this.handleUpload (command.index,command.row);
                    break;
                case "c"://原件整理                    
                	this.handleSettle(command.index,command.row);
                    break;
            }
        }
    },
}
</script>

到此這篇關(guān)于ElementUI中的el-dropdown傳入多參數(shù)的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)ElementUI中el-dropdown傳入多參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: