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

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

O3ohn

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

阅读量2.7k

点赞数 1

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

本文链接：https://blog.csdn.net/ka_xingl/article/details/113043176

版权

elementUI小课堂专栏收录该内容

33 篇文章 7 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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

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

el-select

代码：

//html:
<el-select
 v-model="searchForm.searchCompany"
 filterable
 placeholder="请输入企业关键字"
 clearable
 style="width: 100%"
 ref="selectref"
 @visible-change="visibleType">
 <el-option
   v-for="item in companyOptions"
   :key="item.id"
   :label="item.companyName"
   :value="item.id">
 </el-option>
</el-select>

//js
created() {
   window.addEventListener("keyup",this.enterSearch)
},
methods: {
  enterSearch:function(e){
    if(e.keyCode === 13) {
      this.companyPolicyHandel()
    }
  },
  // 是否显示下拉框
  visibleType(e){
    if(!e) {
      this.$refs.selectref.blur();
    }
  },
}