如何使ElementUi中的el-dropdown傳入多參數

　　這邊由於業務的需求，以爲隨着產品中心之後須要按鈕的增多（圖1操做欄的效果），這樣會致使排版和按鈕過於冗長的問題，用戶體驗不佳，因而想到利用el-dropdown作一個下拉按鈕（圖1操做1欄的效果) 。

 

圖1 兩種按鈕效果

 

 

 　　可是ElementUi官方文檔中的handleCommand方法只容許接入一個參數，這個參數用於觸發你選擇的是哪個選項。而咱們實際中還須要傳入一個當前行數（若是和我同樣，也是用table顯示數據的話）的對象進去，後面要使用這個對象的某些字段傳給後臺進行一些增刪改查的操做。

 

圖2 ElementUi官方文檔中el-dropdown的樣例

 

 　　因而，咱們必須在執行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, scope.row,'b')">刪除</el-dropdown-item>
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'c')">分配角色</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </template>
</el-table-column>

由於咱們是寫在表格裏的，因此須要一個插槽，具體的根據實際狀況進行修改。給<el-dropdown-item>標籤的command屬性綁定一個方法，這個方法就能夠傳入咱們想要的參數，而後利用這個方法封裝成一個對象，再將這個對象傳入handleCommand方法。

<script>
export default {
    methods: {
        handleEdit(index, row) {
           //todo
        },

        deleteUser(index, row) {
            //todo
        },

        assignRole(index, row){
           //todo   
        },

        beforeHandleCommand(index, row,command){
            return {
                'index': index,
                'row': row,
                'command':command
            }
        },
        handleCommand(command) {
            switch (command.command) {
                case "a"://編輯
                    this.handleEdit(command.index,command.row);
                    break;
                case "b"://刪除
                    this.deleteUser(command.index,command.row);
                    break;
                case "c"://分配角色
                    this.assignRole(command.index,command.row);
                    break;
            }
        }
    },
}
</script>    

　　至於匹配command選了哪一個，用switch語句效率就會比較高了。