[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){} ~~~