vue elementui 下拉框收起
时间: 2024-01-10 13:21:51 浏览: 45
你可以使用`el-select`组件的`blur`事件来实现下拉框收起的功能。当下拉框失去焦点时,通过调用`el-select`组件的`collapse`方法来手动收起下拉框。
以下是一个示例代码:
```vue
<template>
<el-select v-model="selectedValue" @blur="handleBlur">
<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: [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' }
]
};
},
methods: {
handleBlur() {
this.$refs.select.collapse();
}
}
};
</script>
```
在上面的代码中,我们通过`@blur`事件监听下拉框失去焦点的事件,并在事件处理函数中调用`collapse`方法来手动收起下拉框。