ElementUI框架中el-select组件在按回车时，隐藏下拉菜单

最新推荐文章于 2024-04-25 17:07:47 发布

O3ohn

最新推荐文章于 2024-04-25 17:07:47 发布

阅读量2.8k

点赞数 1

分类专栏： elementUI小课堂文章标签： vue

本文链接：https://blog.youkuaiyun.com/ka_xingl/article/details/113043176

版权

这篇博客主要讨论了在使用Element UI的el-select组件时遇到的一个问题：按下回车进行搜索后，下拉列表无法自动隐藏。作者通过查阅官方文档，发现需要添加`@visible-change`事件来处理这个问题。在代码示例中，当可见性改变时，如果下拉列表不再可见，则调用`blur`方法使其关闭。同时，作者还监听了键盘的keyup事件，以便在按下回车键时触发搜索功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

测试在el-select做回车搜索时，发现无法隐藏下拉列表

查看官方文档，需要设置@visible-change

el-select

代码：

//html:
<el-select
 v-model="searchForm.searchCompany"
 filterable
 placeholder="请输入企业关键字"
 clearable
 style="width: 100%"
 ref="selectref"
 @visible-change=