el-autocomplete 清除

el-autocomplete 聚焦的问题可能是由于使用了 clearable 属性导致的。根据引用\[3\]的描述，当点击清除图标后，如果已经是聚焦状态，再次点击输入框时下拉框不会再显示。这可能是因为清除图标的点击事件会导致输入框失去焦点，从而不再显示下拉框。解决这个问题的方法是在清除图标的点击事件中手动将输入框聚焦，可以使用 ref 属性来获取 el-autocomplete 组件的实例，然后调用其 focus 方法来实现聚焦。 #### 引用[.reference_title] - *1* [【ElementUI】el-autocomplete 远程搜索自动填充](https://blog.csdn.net/wuli_youhouli/article/details/124673271)[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^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue点击input框弹出autocomplete框自动获取焦点](https://blog.csdn.net/lovezhuer1/article/details/104498347)[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^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [ElementUi el-autocomplete 踩坑 （使用clearable清除,点击输入框下拉条件不再显示）](https://blog.csdn.net/weixin_42190844/article/details/120768467)[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^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

### 取消 `el-autocomplete` 功能的配置方式 在 Vue Element-UI 中，若需要取消 `el-autocomplete` 的功能或调整其行为，可以通过以下几种方法实现： #### 1. 禁用自动触发数据查询 通过设置 `trigger-on-focus="false"` 属性，可以避免输入框获得焦点时自动触发 `fetch-suggestions` 方法。此方法适用于希望用户手动输入后才触发建议列表的情况[^1]。 ```vue <el-autocomplete v-model="value" :fetch-suggestions="querySearchAsync" :trigger-on-focus="false" > </el-autocomplete> ``` #### 2. 清空历史记录 如果需要清除 `el-autocomplete` 的历史记录，可以在关闭对话框或打开对话框时调用 `fetch-suggestions` 方法，并传递空数组作为回调参数。以下是具体实现代码[^3]： ```javascript methods: { clearSuggestions() { this.querySearchAsync('', (results) => { results([]); }); } } ``` #### 3. 使用 `clearable` 属性并解决相关问题 当使用 `clearable` 属性时，可能会遇到点击清除图标后再次聚焦输入框时下拉框不再显示的问题。为了解决这一问题，可以在清除条件后重新触发 `fetch-suggestions` 方法[^2]。 ```vue <el-autocomplete v-model="value" :fetch-suggestions="querySearchAsync" clearable @clear="handleClear" > </el-autocomplete> ``` ```javascript methods: { handleClear() { this.querySearchAsync('', (results) => { results([]); }); } } ``` #### 4. 完全禁用 `el-autocomplete` 的功能 如果需要完全禁用 `el-autocomplete` 的功能，可以通过将 `fetch-suggestions` 设置为空函数来实现。这样即使用户输入内容也不会触发任何建议列表[^1]。 ```vue <el-autocomplete v-model="value" :fetch-suggestions="() => {}" > </el-autocomplete> ``` #### 5. 重置表单中的 `el-autocomplete` 在表单中使用 `el-autocomplete` 时，可以通过调用 `resetFields` 方法清空输入框的内容[^4]。 ```javascript methods: { callOf(formName) { this.dialogFormVisible = false; this.$refs[formName].resetFields(); } } ``` ### 注意事项 - 在设置 `trigger-on-focus="false"` 时，确保用户输入内容后再触发 `fetch-suggestions` 方法。 - 当使用 `clearable` 属性时，注意清除条件后重新触发建议列表的行为。 - 如果需要完全禁用 `el-autocomplete` 的功能，可以通过将 `fetch-suggestions` 设置为空函数来实现。