Element Ui Select Change事件如何传值

1. element ui select change事件如何传值

在 Element UI 中，el-select 组件的 change 事件默认情况下会传递当前选中项的值（即 v-model 的值）。

如果你想要在 change 事件中传递额外的信息，有几种方式可以实现：

1.1. 方法一：使用 $event 和额外参数

你可以直接在事件处理器中添加你需要的参数，通过 JavaScript 的函数特性来实现。

<el-selectv-model="selectedValue"@change="(val, extra) => handleChange(val, extra)"></el-select>

然后在你的 Vue 实例中定义 handleChange 方法：

methods: {
  handleChange(value,extra){
    console.log('Selected value is:',value);console.log('Extra parameter is:',extra);}
}

1.2. 方法二：使用匿名函数包裹

如果希望以更简洁的方式传递额外参数，可以在模板中直接使用匿名函数包裹起来。

<el-selectv-model="selectedValue"@change="(val) => handleChange(val, 'extra data')"></el-select>

然后在 Vue 实例中同样定义 handleChange 方法：

methods: {
  handleChange(value,extra){
    console.log('Selected value is:',value);console.log('Extra parameter is:',extra);}
}

1.3. 方法三：使用 $event 并携带额外数据

如果你想通过 $event 获取到更多的信息（如整个选项对象），并且同时传递额外的数据，可以在事件处理函数中这样做：

<el-selectv-model="selectedValue"@change="handleCustomChange"></el-select>

然后在 Vue 实例中这样定义 handleCustomChange 方法：

methods: {
  handleCustomChange($event){
    constvalue=$event;// 当前选中的值const extraData='some extra data';// 自定义参数console.log('Selected value is:',value);console.log('Extra parameter is:',extraData);}
}

以上就是几种在 el-select 的 change 事件中传递额外参数的方法。

你可以根据自己的具体需求选择最合适的方式来实现。