el-select改变时触发事件
时间: 2025-02-24 15:32:59 浏览: 73
### el-select 组件选择改变时触发事件的方法
在 Vue 中使用 `el-select` 组件时,可以通过监听 `change` 事件来响应用户的选择变化。当用户的选项发生更改时,会触发此事件并传递当前选中的值给绑定的处理器。
#### HTML 结构与数据绑定
为了实现这一功能,在模板部分定义好带有 v-model 的 select 控件,并为其添加 @change 处理器:
```html
<template>
<div class="example">
<!-- 使用v-model双向绑定value变量 -->
<el-select v-model="selectedValue" placeholder="请选择..." @change="handleChange">
<el-option
v-for="(item,index) in options"
:key="index"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
// 定义option列表
const options = [
{
value: 'Option1',
label: '黄金糕'
},
{
value: 'Option2',
label: '双皮奶'
}
];
// 当前选中项的数据模型
let selectedValue = ref('');
function handleChange(value:string){
console.log(`选择了${value}`);
}
</script>
```
上述代码展示了如何设置一个简单的下拉菜单以及相应的事件处理机制[^1]。
每当用户做出新的选择时,都会调用 `handleChange()` 函数并将新选定的值作为参数传入该函数体内;此时可以在控制台打印日志或者其他业务逻辑操作。
阅读全文
相关推荐


















