el-select 无限滚动

对于 el-select 组件的无限滚动问题，你可以尝试使用 el-infinite-scroll 组件来实现。下面是一个示例代码：

 <el-select v-model="selectedOption"
 filterable remote :remote-method="fetchOptions"
 :loading="loading"
 popper-class="infinite-scroll-select"
 :popper-options="{ boundariesElement: 'body' }"
 >
 <el-option v-for="option in options"
 :key="option.value"
 :label="option.label"
 :value="option.value"
 ></el-option>
 </el-select>
</template>

<script>
export default {
 data() {
 return {
 selectedOption: null,
 options: [],
 loading: false,
 pageIndex:1,
 pageSize:10,
 };
 },
 methods: {
 fetchOptions(query) {
 // 模拟异步请求数据 this.loading = true;
 setTimeout(() => {
 // 请求数据 const response = {
 data: [
 { label: 'Option1', value: '1' },
 { label: 'Option2', value: '2' },
 // ...
 ],
 };
 // 更新选项列表 this.options = this.options.concat(response.data);
 this.loading = false;
 this.pageIndex++;
 },500);
 },
 },
};
</script>

<style scoped>
.infinite-scroll-select .el-select-dropdown__wrap {
 max-height:200px; /* 设置最大高度，超过该高度将出现滚动条 */
 overflow-y: auto;
}
</style>

这个示例中，el-select 组件设置了 `filterable` 和 `remote` 属性，通过 `remote-method` 属性绑定一个方法来处理异步数据请求。在 `fetchOptions` 方法中，你可以发送异步请求来获取数据，并在请求成功后更新选项列表。同时，我们使用了 el-infinite-scroll 组件来实现无限滚动效果，当滚动到底部时会自动触发 `fetchOptions` 方法加载更多的选项。你可以根据实际需求调整代码中的数据请求和样式。希望这个示例能帮到你！如果你有更多问题，可以继续问我。