在开发中，经常会用到回调函数，比如下拉框的 change 事件，switch 开关的切换事件等，默认回调事件，会返回执行动作后的值，那么如果我们想通过回调的时候，传多个参数，该怎么搞？

今天，在开发 element-ui 工程的时候，就遇到了这个场景，下面简单记录一下解决方案。

业务场景：

使用 <el-table> 对结果集进行遍历时，需要针对某一个列，在列表中，进行相应处理，不需要点击编辑，然后对数据进行更改操作。我这里是加了一个开关，方便管理员对商家进行控制。

代码实现：

案例一：

请忽略<el-form-item> 标签（业务调整，换成了表单方式处理）。

重点关注 @select 回调函数的传参

<el-form-item label="每日限额" prop="dailyQuota">
   <el-autocomplete class="inline-input" v-model="dataForm.dailyQuota" :fetch-suggestions="querySearch"
          placeholder="请输入限额" @select="(item) => handleSelect(item,scope.row)">
   </el-autocomplete>
</el-form-item>

 方法回调后，会将回调结果传去方法，这个第一个参数为回调结果值，第二个参数，是我们需要多传的参数，用来处理我们需要的业务：

handleSelect(item,row) {
  row.dailyQuota = item.value
  console.log("search === " + row.dailyQuota)
},

案例二：

也是很常见的 switch开关，开关切换的时候，会触发回调，传递当前开关的状态。

重点关注 @change 回调函数的传参

<el-table-column prop="onlineFlag" header-align="center" align="center" width="120" label="线上点餐">
  <template slot-scope="scope">
    <el-switch v-model="scope.row.onlineFlag === 'Y' ? true : false" @change="(active) => {onlineFlagChange(active,scope.row)}"
      active-color="#13ce66" inactive-color="#ff4949">
    </el-switch>
  </template>
</el-table-column>

 同理，第一个参数是回调结果值，第二个参数是我们额外传入的。

onlineFlagChange(active,row) {
  console.log("======> " + typeof(active))
  this.$http({
    url: this.$http.adornUrl(`/business/update`),
    method: 'post',
    data: this.$http.adornData({
      id: row.id,
      onlineFlag: active ? 'Y' : 'N'
    })
  }).then(({
    data
  }) => {
    if (data && data.code === 0) {
      this.$message({
        message: '操作成功',
        type: 'success',
        duration: 1500,
      })
      this.getDataList();
    } else {
      this.$message.error(data.msg)
    }
  })
},

最终效果：

好了，希望能帮到有同样业务场景的小伙伴儿~