el-select @change 后实现失去焦点
时间: 2023-11-20 07:53:25 浏览: 77
可以在@change事件中添加失去焦点的方法,例如:
```
<el-select v-model="selected" @change="handleChange">
<el-option label="选项1" value="1"></el-option>
<el-option label="选项2" value="2"></el-option>
</el-select>
...
methods: {
handleChange() {
this.$nextTick(() => {
this.$refs.select.blur();
});
}
}
```
在@change事件中调用$nextTick方法,等待DOM更新后再让el-select失去焦点。这样可以确保在选中选项后再失去焦点。
相关问题
el-select选中后失去焦点
在`el-select`选中后失去焦点,可以通过使用JavaScript来实现。你可以在选中事件后,手动将焦点移动到其他元素上,从而让`el-select`失去焦点。以下是一个示例代码:
```html
<template>
<el-select v-model="selectedOption" @change="handleSelectChange">
<!-- options here -->
</el-select>
</template>
<script>
export default {
data() {
return {
selectedOption: null
};
},
methods: {
handleSelectChange() {
// 手动将焦点移动到其他元素上
this.$refs.otherElement.focus();
}
}
};
</script>
```
这里的`handleSelectChange`方法会在选中事件发生时被调用,并在方法内使用`this.$refs.otherElement.focus()`将焦点移动到其他元素上,从而使`el-select`失去焦点。你需要将`otherElement`替换为你想要将焦点移动到的其他元素的引用名。
希望这个示例能够帮助到你!如果你还有其他问题,请随时提问。
el-select的change
el-select的change事件可以通过两种方式来使用。第一种方式是在select标签上添加@change="change",并在methods中定义change方法来处理事件。例如:
```
<el-select @change="change" v-model="value1" placeholder="请选择">
<el-option @focus="get1()" v-for="item in list2" :key="item.code + item.name" :label="item.code + item.name" :value="item.code + item.name"></el-option>
</el-select>
```
其中,change方法可以通过传入的事件对象e来获取对应的值。
第二种方式是在select标签上添加@change="change($event)",并在methods中定义change方法来处理事件。例如:
```
<el-select @change="change($event)" v-model="value1" placeholder="请选择">
<el-option @focus="get1()" v-for="item in list2" :key="item.code + item.name" :label="item.code + item.name" :value="item.code + item.name"></el-option>
<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [el-select实现change](https://blog.csdn.net/weixin_45336090/article/details/128223034)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [elementUI中下拉选择器el-select中Select Events事件 change 方法参数两种使用 和option的focus触发焦点](https://blog.csdn.net/m0_49714202/article/details/122826148)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]