el-autocomplete失去焦点搜索
时间: 2023-12-16 16:28:08 浏览: 148
文本失去焦点
为了实现el-autocomplete失去焦点搜索,可以在fetch-suggestions属性中调用querySearch方法,并在该方法中添加失去焦点的事件监听器。具体实现方法如下所示:
```html
<el-autocomplete
v-model.trim="search.userName"
v-loading="autocompleteLoading"
class="inline-input control"
:fetch-suggestions="querySearch"
placeholder="请输入或搜索专员姓名"
ref="autoComplete"
@blur="handleBlur"
/>
```
```javascript
// 在methods中定义querySearch方法
querySearch(userName, cb) {
// 在方法中添加失去焦点的事件监听器
this.$refs.autoComplete.$refs.input.addEventListener('blur', () => {
this.queryCommissionerList(userName)
cb(this.commissionerList)
})
},
// 定义失去焦点的事件处理函数
handleBlur() {
this.$refs.autoComplete.$refs.input.removeEventListener('blur', () => {})
}
```
在上述代码中,我们在el-autocomplete组件中添加了blur事件监听器,并在该事件处理函数中调用了queryCommissionerList方法和回调函数cb,以获取建议列表的数据。同时,我们还定义了一个handleBlur方法,用于移除blur事件监听器,以避免重复调用queryCommissionerList方法。
阅读全文