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); // 处理选择逻辑
  }
}