vue3 el-select 加载触发

在 Vue 3 中使用 Element Plus 的 <el-select> 组件时，你可能想要在用户与下拉列表交互时触发某些事件，比如加载数据。这里有几种方法可以实现这个需求：

1. 使用 @visible-change 事件

<el-select> 组件提供了一个 @visible-change 事件，该事件在组件的显示状态改变时触发。你可以利用这个事件来在用户打开下拉列表时加载数据。

<template>
  <el-select v-model="selected" @visible-change="handleVisibleChange">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
 
<script setup>
import { ref } from 'vue';
 
const selected = ref(null);
const options = ref([]);
 
const handleVisibleChange = (val) => {
  if (val) {
    // 当下拉列表显示时，加载数据
    loadData();
  }
};
 
const loadData = async () => {
  // 模拟异步加载数据
  await new Promise(resolve => setTimeout(resolve, 1000));
  options.value = [
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    // 更多选项...
  ];
};
</script>

2. 使用 @focus 和 @blur 事件（不推荐）

虽然 <el-select> 没有直接的 @focus 和 @blur 事件，你可以通过监听输入框的这些事件来实现类似的功能。但是，这种方法通常不推荐，因为它依赖于内部实现的细节，可能会在未来的版本中发生变化。更推荐使用 @visible-change。

3. 使用 watch 监听下拉列表的显示状态（不推荐）

虽然可以通过计算属性或 watch 来监听下拉列表的状态，但这通常不是推荐的做法，因为这样做可能会引入不必要的复杂性和性能问题。Element Plus 的设计初衷就是让开发者能够通过简单的事件来处理常见的交互，所以优先考虑使用官方提供的事件（如 @visible-change）。

为了实现 <el-select> 下拉列表加载数据的需求，最推荐的方法是使用 @visible-change 事件。这种方法简洁且符合 Element Plus 的设计理念，同时也保证了代码的健壮性和未来的兼容性。如果你的场景确实需要更复杂的交互处理，请确保你的方法不会违背组件的设计初衷。