el-option 选中触发
时间: 2024-09-08 08:02:46 浏览: 58
Vue: 多个el-select不能重复选择相同属性
`el-option` 是 Element UI 中用于构建下拉列表(select)的组件选项项,它通常作为 `el-select` 组件的内部元素存在。当一个 `el-option` 被用户选择(即点击)时,它会触发一个内置的事件,这个事件通常称为 "change" 或 "selection-change"。
当你在 Vue.js 程序中设置了一个 `v-model` 属性绑定到 `el-select` 的值上,那么当你选择一个 `el-option`,`v-model` 的值会被更新,同时这个操作会触发 `el-select` 自身的 `change` 事件。例如:
```html
<el-select v-model="selectedValue">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
@change="handleOptionChange"
></el-option>
</el-select>
<script>
export default {
data() {
return {
selectedValue: '',
options: [
//...
]
};
},
methods: {
handleOptionChange(value) {
console.log('当前选中的值:', value);
// 这里可以进一步处理当选中的option时需要的操作
}
}
};
</script>
```
在这个例子中,`@change` 是事件监听器,当 `el-option` 被选中时,`handleOptionChange` 方法会被调用。
阅读全文