el-select手动收起
时间: 2023-12-01 09:42:33 浏览: 35
要手动收起el-select,可以使用$refs属性来获取el-select的实例,然后调用实例的blur方法。具体实现如下所示:
```javascript
this.$refs.fuzzySearch.blur(); //手动收起el-select
```
其中,fuzzySearch是el-select的ref属性值,可以根据实际情况进行修改。调用blur方法后,el-select会自动收起下拉框。
相关问题
el-select 收起
要实现el-select的收起,可以通过以下步骤进行操作。
首先,根据引用中的说明,可以封装el-select,并添加一个自定义方法"v-click-outside"。这个方法会在点击el-select外部时被触发。
其次,根据引用中的CSS代码,可以给el-select的下拉框图标绑定点击事件,使其能够收起下拉菜单。
最后,在自定义方法"v-click-outside"中,使用"this.$refs.upSelect.blur()"来使el-select失去焦点并隐藏下拉菜单。
这样,当点击el-select外部时,就会触发"v-click-outside"方法,从而使el-select收起下拉菜单。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [elSelect组件.vue](https://download.csdn.net/download/Scott_zt/12488600)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [el-select 可过滤状态点击最右arrow icon可收起](https://blog.csdn.net/qq_27314517/article/details/118733832)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [elSelect点击空白处无法收起下拉框(失去焦点并隐藏)](https://blog.csdn.net/Scott_zt/article/details/106494140)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]
el-select手动清空数据
若要手动清空 `el-select` 组件中的选中数据,可以使用 `v-model` 绑定选中值,并将其赋值为空数组即可。例如:
```html
<el-select v-model="selectedOptions" multiple>
<!-- options -->
</el-select>
```
```javascript
data() {
return {
selectedOptions: []
}
},
methods: {
clearSelectedOptions() {
this.selectedOptions = []
}
}
```
然后在需要清空选中数据的地方调用 `clearSelectedOptions` 方法即可。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)