el-select滚动加载

对于el-select组件的滚动加载，您可以使用以下步骤来实现：

1. 使用el-select组件，在模板中添加一个el-select元素，并设置合适的宽度和高度。

<el-select v-model="selectedOption" placeholder="请选择" :style="{ width: '200px', height: '300px' }">
  <!-- 选项内容 -->
</el-select>

2. 在data中定义需要的数据变量，如选中的选项和选项列表。

data() {
  return {
    selectedOption: '', // 用于存储选中的选项
    options: [] // 用于存储所有的选项列表
  };
},

3. 在mounted()生命周期钩子中，添加监听滚动事件的逻辑。

mounted() {
  const selectWrapper = this.$refs.select.$el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');

  selectWrapper.addEventListener('scroll', () => {
    // 当滚动到底部时，触发加载更多数据的逻辑
    if (selectWrapper.scrollTop + selectWrapper.clientHeight >= selectWrapper.scrollHeight) {
      this.loadMoreOptions();
    }
  });
},

4. 实现加载更多数据的逻辑。

methods: {
  loadMoreOptions() {
    // 模拟异步加载数据，可以根据实际需求进行修改
    setTimeout(() => {
      const newOptions = [/* 新加载的选项列表 */];
      this.options = this.options.concat(newOptions);
    }, 500);
  }
}

5. 在el-select组件中动态渲染选项。

<el-select v-model="selectedOption" placeholder="请选择" :style="{ width: '200px', height: '300px' }">
  <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>

这样，当滚动到el-select组件的底部时，会触发加载更多数据的逻辑，并将新加载的选项添加到下拉框中。请根据实际需求和数据源接口进行相应的修改。