ElementUi使用el-autocomplete实现搜索建议（无数据匹配+点击clearable清除，不触发下拉选项）

小太阳...

已于 2022-10-21 18:01:17 修改

阅读量1.1w

点赞数 16

分类专栏： element 文章标签： elementui el-autocomplete vue javascript

于 2022-10-21 17:54:54 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46074961/article/details/127449047

版权

先上效果图：
首先没输入的情况下是这样
在这里插入图片描述
如果有匹配选项是这样

匹配不到是这样

在使用过程中发现，element的el-autocomplete组件是不支持没有数据的时候提示无匹配数据的，如果要设置成可关闭的，发现点击关闭后，如果还是在聚焦状态，再次输入是不触发输入建议的，如下图：
在这里插入图片描述
代码如下：

     <el-form-item label="平台名称">
       <el-autocomplete
         ref="el_auto" // 为了解决关闭后不匹配
         v-model="platformName"
         :fetch-suggestions="querySearch"
         :trigger-on-focus="false"
         :clearable="true"
         :popper-class="noData ? 'platform-auto-complete' : ''"         
         value-key="platformName" // 输入建议对象中用于显示的键名,默认是value
         class="inline-input"
         placeholder="请输入上报平台关键字"
         @select=