巧妙解决 Element-UI el-autocomplete 下拉框事件冲突
在使用 Element-UI 的 el-autocomplete 组件时，点击下拉框项目常常会同时触发 change 和 select 事件，这可能会导致一些不必要的逻辑执行。本文提供一种方法，让点击下拉框项目只触发 select 事件。
问题在于 change 事件会在输入框值改变时触发，而 select 事件则在选择下拉框项目后触发。 为了避免 change 事件的干扰，我们可以利用 blur 事件。当点击下拉框外部时，blur 事件会被触发。这时，我们可以手动触发 select 事件，从而绕过 change 事件。
以下代码展示了如何实现：
methods: {
handleBlur() {
this.$refs.autocomplete.select(); // 手动触发 select 事件
},
handleSelect(val) {
// 自定义选择后的处理逻辑
console.log('Selected value:', val);
},
querysearch(queryString, cb) {
// ... your search logic ...
}
}
通过这种方法，我们利用 blur 事件和 $refs 来手动触发 select 事件，从而确保点击下拉框项目时只执行 select 事件的回调函数 handleSelect，而不会触发 change 事件。 handleSelect 函数中可以编写您需要的自定义逻辑。 请确保您的 querysearch 函数正确地实现了搜索建议的功能。
