el-select 下拉加载

您好！对于 el-select 组件的下拉加载功能，您可以通过自定义指令或者监听事件的方式来实现。以下是一种常见的实现方式：

1. 首先，您需要监听 el-select 的弹出事件（@visible-change），当下拉框展开时触发回调函数。

2. 在回调函数中，您可以进行异步请求数据的操作，比如使用 axios 发送请求获取新的下拉选项数据。

3. 在请求成功后，将获取到的数据添加到原有的下拉选项中。

4. 最后，您可能还需要设置一个标志位来控制是否还有更多数据可加载，以避免重复请求。

下面是一个简单的代码示例：

<template>
  <el-select v-model="value" @visible-change="loadMoreOptions">
    <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
 </el-select>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      value: '',
      options: [],
      hasMoreOptions: true, // 是否还有更多数据可加载
    };
  },
  methods: {
    loadMoreOptions() {
      if (!this.hasMoreOptions) {
        return;
      }

      // 发送异步请求获取新的下拉选项数据
      axios.get('/api/options').then(response => {
        // 将获取到的数据添加到原有的下拉选项中
        this.options = this.options.concat(response.data);

        // 判断是否还有更多数据可加载
        if (response.data.length < 10) {
          this.hasMoreOptions = false;
        }
      });
    },
  },
};
</script>

在上面的示例中，el-select 组件的下拉选项会在每次弹出时触发 loadMoreOptions 方法，在该方法中通过异步请求获取新的选项数据，并将其添加到原有数据中。同时，还通过 hasMoreOptions 标志位来控制是否还有更多数据可加载。

希望以上内容能够对您有所帮助！如果还有其他问题，请随时提问。