最近工作中因為業務中按鈕的增多，導致頁面排版按鈕過多，頁面不夠美觀，使用者體驗不佳，於是想到利用el-dropdown做一個下拉按鈕（把多個按鈕整合到了一起，下拉實現）

但是ElementUi官方文件中的handleCommand方法只允許接入一個引數，這個引數用於觸發你選擇的是哪一個選項。而我們實際中還需要傳入一個當前行數（如果和我一樣，也是用table顯示資料的話）的物件進去，後面要使用這個物件的某些欄位傳給後臺進行一些增刪改查的操作。

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-dhttp://www.cppcns.com
 
ropdown-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>

我們必須在執行handleCommand方法之前，對這個command引數進行重新封裝成一個物件，使其內部包含我們想要的資料方便後面呼叫。

程式碼如下：

<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,'b')">上傳原件</el-dropdown-item>
                <el-dropdown-item :command="beforeHandleCommand(scope.$index,'c')">原件整理</el-dropdown-item>
                <el-dropdown-item disabled :command="beforeHandleCommand(scope.$index,'d'YKbgR
 
)">凍結</el-dropdown-item>
                <el-dropdown-item disabled :command="beforeHandleCommand(scope.$index,'e')">解凍</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    &lt;/template>
</el-table-column>

因為我們是寫在表格裡的，所以需要一個插槽，具體的根據實際情況進行修改。給標籤的command屬性繫結一個方法，這個方法就可以傳入我們想要的引數，然後利用這個方法封裝成一個物件，再將這個物件傳入handleCommand方法。

<script>
export default {
    methods: {
        handleAbandon(index,row) {
           //todo
        },handleUpload (index,row) {
            //todo
        },handleSettle(index,row){
           //todo   
        },beforeHandleCommanwww.cppcns.comd(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>

到此這篇關於ElementUI中的el-dropdown傳入多引數的實現方法的文章就介紹到這了,更多相關ElementUI中el-dropdown傳入多引數內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！