在 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); // 處理選擇邏輯}
}
)
