el-select选中时获取选项的事件
时间: 2024-09-26 18:02:03 浏览: 53
`el-select` 是 Element UI 中的一个下拉选择组件,在 Vue.js 中,当用户选择一个选项时,通常会触发 `selection-change` 或者 `change` 事件。这两个事件会在用户完成选择并离开下拉框时触发。
- `selection-change` 事件表示选中值已经改变,返回的是当前选中的值或数组。
- `change` 事件则是指单次选择时,返回的是被选中的选项对象。
如果你想在选中某个选项时获取该选项,你可以像下面这样监听这个事件:
```html
<template>
<el-select v-model="selectedValue" @selection-change="handleSelectionChange">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedValue: '',
options: [
// 你的选项列表
]
};
},
methods: {
handleSelectionChange(value) {
const selectedOption = this.options.find(option => option.value === value);
console.log('选中的选项:', selectedOption);
}
}
};
</script>
```
在这个例子中,`handleSelectionChange` 方法会被调用,并且传入所选值作为参数,然后通过遍历 `options` 列表找到对应的选项对象。
阅读全文