在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍如何在`el-select`组件中获取这些额外参数。
`el-select`组件的`v-model`属性用于绑定选定的值，`@change`事件则在选中项发生变化时触发。默认情况下，`change`事件的回调函数接收到的参数是当前选中项的值。然而，如果我们需要在触发`change`事件时同时获取到更多的信息，如当前表格行的数据，我们可以这样做：
```html
<el-table-column
label="用户类型"
width="180">
<template slot-scope="scope">
<el-select
v-model="scope.row.roleID"
placeholder="请选择"
@change="changeRole($event, scope)">
<el-option
v-for="item in roles"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</el-table-column>
```
在上面的例子中，`scope`对象包含了当前行的所有数据，我们可以通过`scope.row`访问到。为了在`changeRole`方法中同时获取选中的值（通过`$event`参数）和当前行的其他数据（通过`scope`参数），我们把它们都作为参数传递给`changeRole`方法。这样，就不会覆盖默认的`$event`参数，而是将其与自定义的`scope`参数一起传递。
补充知识：在Element UI的`select`组件中，如果你需要在`change`事件中传递多个值，可以按照以下方式处理：
```javascript
// 在模板中
<el-select
v-model="selectedValue"
@change="handleChange($event, 'otherValue')">
<!-- ... -->
</el-select>
// 在Vue实例的方法中
methods: {
handleChange(selectedValue, otherValue) {
console.log('选中的值:', selectedValue);
console.log('其他需要的值:', otherValue);
}
}
```
这样，你可以在`handleChange`方法中同时访问到选中的值和其他自定义值。
总结一下，当使用Vue + Element-ui的下拉框`el-select`时，通过`@change`事件结合`$event`参数可以获取到选中的值，而通过额外传递的参数（如`scope`或自定义值）则可以获取到更多上下文信息。这种技巧适用于那些需要在组件事件中处理多种数据的场景，确保了代码的灵活性和可维护性。在实际项目中，可以根据具体需求调整和扩展这个方法，以满足各种复杂的需求。
