[TOC] >[success] # 給事件傳額外參數 在開發中用**element ui**中的**下拉組件**遇到了一個問題，官方提供的事件，只有一個**默認自帶參數**可以使用，**如果想傳多個參數就會覆蓋原來的參數**，然后找了網上好多的案例最終找到了3種解決辦法： ~~~ <el-table-column label="日期" width="180"> <template slot-scope="scope"> <el-dropdown @command="handleCommand"> // 這里是點擊菜單的事件，默認的參數只有command <button>下拉菜單</button> <template #dropdown> <el-dropdown-menu> <el-dropdown-item command="a">黃金糕</el-dropdown-item> <el-dropdown-item command="b">獅子頭</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </template> </el-table-column> ~~~ <br> >[success] ## 改變獲取屬性的數據類型 可以把**command**屬性的改成對象的形式，這樣在**形參**那就可以獲取到**對象中所有的參數數據** ~~~ <el-table-column label="日期" width="180"> <template slot-scope="scope"> <el-dropdown @command="handleCommand"> <button>下拉菜單</button> <template #dropdown> <el-dropdown-menu> <el-dropdown-item :command="{ id: a, row: scope.row }">黃金糕</el-dropdown-item> <el-dropdown-item :command="{ id: b, row: scope.row }">獅子頭</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </template> </el-table-column> ~~~ <br> >[success] ## 用$event的方式 **原生DOM事件**綁定的函數的第一個參數都會是**事件對象event**，但是有時候我們想給這個函數傳其他的參數，**直接傳會覆蓋掉event**，我們可以這么寫<div @click="clickDiv(params,$event)"></div>，**變量$event就代表事件對象**。 ~~~ // html代碼 <el-table-column label="日期" width="180"> <template slot-scope="scope"> <el-dropdown @command="handleCommand($event, row)"> // 這樣就可以傳2個參數 <button>下拉菜單</button> <template #dropdown> <el-dropdown-menu> <el-dropdown-item command="a">黃金糕</el-dropdown-item> <el-dropdown-item command="b">獅子頭</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </template> </el-table-column> // js代碼 handleCommand($event, row){} ~~~ <br> >[success] ## 用閉包的方式 **下拉菜單事件 command 函數**自帶一個參數，為下拉選中的值，這個時候我們想把表格數據傳過去，如果 **@command="handleCommand(row)"** 這樣寫，就會覆蓋掉自帶的參數，該怎么辦呢？這時候我們可以借助箭頭函數： **@command="command => handleCommand(row,command)"** ，完美解決傳參問題。 ~~~ // html代碼 <el-table-column label="日期" width="180"> <template slot-scope="scope"> <el-dropdown @command="command => { handleCommand(command, row) }"> // 這樣就可以傳2個參數 <button>下拉菜單</button> <template #dropdown> <el-dropdown-menu> <el-dropdown-item command="a">黃金糕</el-dropdown-item> <el-dropdown-item command="b">獅子頭</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </template> </el-table-column> // js代碼 handleCommand(command, row){} ~~~