巧妙解决 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 函数正确地实现了搜索建议的功能。
以上就是如何只让Element-UI的el-autocomplete下拉框点击触发select事件？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2638622.html
