vue3 el-select 加载内容后 触发事件

在 Vue 3 中使用 Element UI 的 el-select 组件实现加载内容后触发事件，主要有以下两种常见需求及实现方式：

加载数据后触发事件

若需在数据加载完成后触发特定事件（如页面渲染完成），可通过自定义指令监听滚动容器状态：

// 注册自定义指令
Vue.directive('loadmore', {bind: function(el, binding, vnode) {const dropdown = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap");dropdown.addEventListener("scroll", function() {if (dropdown.scrollTop === 0 && dropdown.scrollHeight - dropdown.clientHeight <= dropdown.scrollTop) {// 触发加载事件binding.value();} });}
});

使用时添加指令：

<el-select v-model="value" @change="handleChange" v-loadmore="loadData"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

选择事件触发

若需每次选择后触发事件，直接使用原生 @change 事件即可：

<el-select @change="handleChange" v-model="selectedValue"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

methods: {handleChange(value) {console.log(value); // 处理选择逻辑}
}