elementUI最新版的el-select使用filterable无效无法匹配正确搜索结果的Bug解决办法

### 解决 `el-select` 下拉框选择后不自动关闭的问题 对于 `el-select` 组件，在选择选项之后下拉菜单未能正常关闭的现象，通常是因为组件内部的状态管理出现了异常或者是某些配置项未被正确设置。为了确保每次选中项目时都能触发预期行为——即自动收起下拉列表，可以采取如下措施： #### 方法一：监听事件并手动控制可见性状态 通过绑定自定义方法至 `change` 或者 `visible-change` 事件来实现对下拉面板显示隐藏逻辑的手动干预。 ```javascript // JavaScript部分 methods: { handleSelectChange(value){ // 执行其他业务逻辑... // 关闭下拉框 this.$refs.mySelect.blur(); } } ``` ```html <!-- HTML模板 --> <template> <div> <!-- ... --> <el-select ref="mySelect" @change="handleSelectChange"> <!-- option items here --> </el-select> <!-- ... --> </div> </template> ``` 这种方法利用了 Vue 的 `$refs` 属性获取 DOM 节点实例，并调用了其上的 `blur()` 函数模拟失去焦点的行为从而达到关闭效果[^1]。 #### 方法二：调整默认参数设定 有时问题可能源于框架本身的默认设置不当所致；此时可尝试修改官方文档推荐的一些重要属性值，比如将 `filterable`, `remote` 等布尔型开关设为 false（除非确实需要用到这些特性），以及适当调整 `clearable` 参数以适应具体应用场景需求。 ```html <el-select clearable placeholder="请选择..." :remote="false" :filterable="false"> <!-- options go here --> </el-select> ``` 上述做法有助于排除因特殊功能启用而引发的副作用干扰[^2]。 #### 方法三：更新 Element UI 版本 考虑到软件库可能存在 bug 导致此现象发生，建议检查所使用的 Element UI 是否处于最新稳定版。如果不是，则应当考虑升级到更高版本以便获得更好的兼容性和修复已知缺陷的支持[^3]。