巧妙解决 Element-UI el-autocomplete 下拉框事件冲突
在使用 Element-UI 的 el-autocomplete 组件时，点击下拉框项目常常会同时触发 change 和 select 事件，这可能会导致一些不必要的逻辑执行。本文提供一种方法，让点击下拉框项目只触发 select 事件。
问题在于 change 事件会在输入框值改变时触发，而 select 事件则在选择下拉框项目后触发。 为了避免 change 事件的干扰，我们可以利用 blur 事件。当点击下拉框外部时，blur 事件会被触发。这时，我们可以手动触发 select 事件，从而绕过 change 事件。
以下代码展示了如何实现：
<code class="vue"><el-autocomplete :fetch-suggestions="querysearch" :trigger-on-focus="false" class="inline-input" placeholder="请输入内容" v-model="state2" @blur="handleBlur" @select="handleSelect" ref="autocomplete" ></el-autocomplete></code>
<code class="javascript">methods: {
handleBlur() {
this.$refs.autocomplete.select(); // 手动触发 select 事件
},
handleSelect(val) {
// 自定义选择后的处理逻辑
console.log('Selected value:', val);
},
querysearch(queryString, cb) {
// ... your search logic ...
}
}</code>通过这种方法，我们利用 blur 事件和 $refs 来手动触发 select 事件，从而确保点击下拉框项目时只执行 select 事件的回调函数 handleSelect，而不会触发 change 事件。 handleSelect 函数中可以编写您需要的自定义逻辑。 请确保您的 querysearch 函数正确地实现了搜索建议的功能。
以上就是如何只让Element-UI的el-autocomplete下拉框点击触发select事件？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
966
收藏
