第4节：el-select 弹窗事件控制（打开 / 关闭、选中事件、弹窗滚动事件）

第4节el-select 弹窗事件控制打开 / 关闭、选中事件、弹窗滚动事件本节重点监听下拉弹窗的显示隐藏区分「选中值变化」和「弹窗打开关闭」弹窗相关事件还有弹窗关闭阻止场景。核心事件清单el-selectvisible-change弹窗打开 / 关闭触发参数(boolean)true 弹窗打开false 弹窗关闭change选中的值发生变化才触发弹窗打开关闭不会触发这个事件很多新手混淆这点blur选择框失去焦点focus选择框获得焦点补充el-select 没有直接的popper-openvisible-change就是用来监听下拉弹窗的。完整可测试代码template div classcontainer el-select v-modelselectVal placeholder请选择看控制台打印事件 visible-changehandleVisibleChange changehandleChange el-option labelVue valuevue / el-option labelReact valuereact / el-option labelAngular valueangular / /el-select div stylemargin-top:20px p弹窗状态{{ popVisible ? 已打开 : 已关闭 }}/p p当前选中值{{ selectVal }}/p /div /div /template script setup import { ref } from vue const selectVal ref() const popVisible ref(false) // 弹窗打开/关闭事件 const handleVisibleChange (flag) { popVisible.value flag console.log(visible-change 弹窗状态, flag) } // 选中值变更事件 const handleChange (val) { console.log(change 选中新值, val) } /script style scoped .container { padding: 20px; } /style测试步骤打开浏览器控制台F12点击下拉框展开弹窗触发visible-change(true)change 不会触发点击选项选中先关闭弹窗visible-change(false)然后触发change点击空白处关闭弹窗只触发visible-change(false)change 不触发再次点开下拉visible-change(true)业务常见场景需要弹窗打开时远程请求加载选项数据写在handleVisibleChange判断 flag true 请求⚠️ 坑点每次打开都会触发注意加锁防止重复请求比如加 loading 标记