当 Select 选择器遇到数千条数据：远程搜索与无限滚动加载的终极解决方案

引言

在现代前端应用开发中，Select 下拉选择器是一个非常常见的 UI 组件。然而，当面对成千上万条数据时，传统的 Select 实现方式往往会出现性能瓶颈，导致页面卡顿甚至崩溃。本文将深入探讨如何通过远程搜索和无限滚动加载技术，优雅地解决这一难题。

核心原理

1. 远程搜索机制

<el-select 
  v-model="selectedValue" 
  clearable 
  filterable 
  remote 
  reserve-keyword 
  :remote-method="remoteMethod"
  :loading="searchloading"
>

远程搜索的核心在于 remote 和 remote-method 属性。当用户输入关键字时，组件不会在本地筛选数据，而是调用后端 API 获取匹配结果：

const remoteMethod = async (val: string) => {
  userForm.value[props.modelKey] = val.trim();
  options.value = []; // 清空当前选项
  userForm.value.current = 1; // 重置页码
  await fetchData(); // 请求新数据
};

2. 无限滚动加载

通过 v-infinite-scroll 指令实现无限滚动加载功能：

<div class="bank-layout" v-infinite-scroll="load" :infinite-scroll-delay="500">
  <el-option v-for="item in options" :key="item[valueKey]" :label="item[labelKey]" :value="item[valueKey]" />
  <p class="flex-center-center footer" v-if="pullLoading">Loading...</p>
  <p class="flex-center-center footer" v-if="noMore">已经到底啦！！！</p>
</div>

当用户滚动到容器底部时，自动触发 load 方法加载更多数据：

const load = async () => {
  if (noMore.value || pullLoading.value) return;
  userForm.value.current += 1;
  await fetchData();
};

实现方案详解

数据请求逻辑

const fetchData = async () => {
  try {
    if (userForm.value[props.modelKey]) {
      pullLoading.value = true;
      const result = await props.api(userForm.value);
      const records = result.data?.records || result.records || [];
      total.value = result.data?.total || result.total || 0;

      if (records.length > 0) {
        options.value = concat(options.value, records); // 合并新旧数据
        emit('optionsChange', options.value);
      }
      pullLoading.value = false;
    }
  } catch (err) {
    console.error('fetch data error::: ', err);
    pullLoading.value = false;
  }
};

分页管理

interface UserFormType {
  current: number; // 当前页码
  size: number;    // 每页大小
  [key: string]: any;
}

const userForm = ref<UserFormType>({
  current: 1,
  size: 10,
});

加载状态控制

const noMore = computed(() => options.value.length >= total.value);

通过比较已加载数据量和总数据量判断是否还有更多数据可加载。

完整代码

<!-- 远程搜索 -->
<template>
    <el-select v-model="selectedValue" clearable filterable remote reserve-keyword :remote-method="remoteMethod"
        :loading="searchloading" :placeholder="placeholder" @change="handleChange" @clear="clearSelected">
        <template #default>
            <div class="bank-layout" v-infinite-scroll="load" :infinite-scroll-delay="500">
                <el-option v-for="item in options" :key="item[valueKey]" :label="item[labelKey]"
                    :value="item[valueKey]" />
                <p class="flex-center-center footer" v-if="pullLoading">Loading...</p>
                <p class="flex-center-center footer" v-if="noMore">已经到底啦！！！</p>
            </div>
        </template>
    </el-select>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { concat } from 'lodash';

// 定义泛型接口
interface OptionItem {
    [key: string]: any;
}

const props = withDefaults(defineProps<{
    modelValue: string | number | null; // 绑定值
    api: (params: any) => Promise<any>; // 外部传入的API接口
    placeholder?: string; // 占位符文本
    modelKey?: string; // 查询参数key
    valueKey?: string; // 值字段名，默认为'id'
    labelKey?: string; // 显示字段名，默认为'name'
}>(), {
    placeholder: '请输入搜索关键词',
    modelKey: 'key',
    valueKey: 'id',
    labelKey: 'name'
});

const emit = defineEmits<{
    (e: 'update:modelValue', value: string | number | null): void;
    (e: 'change', option: OptionItem | null): void;
    (e: 'optionsChange', options: OptionItem[]): void; // 选项变化时触发
    (e: 'clear'): void; // 选项变化时触发
}>();

const selectedValue = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value)
});

const options = ref<OptionItem[]>([]);
const searchloading = ref(false);
const pullLoading = ref(false);
const total = ref(0);
interface UserFormType {
    current: number;
    size: number;
    [key: string]: any;
}
const userForm = ref<UserFormType>({
    current: 1,
    size: 10,
});

const noMore = computed(() => options.value.length >= total.value);

// 滚动到最底部加载下一页数据
const load = async () => {
    if (noMore.value || pullLoading.value) return;
    userForm.value.current += 1;
    await fetchData();
};

// 搜索方法
const remoteMethod = async (val: string) => {
    // 去除两边空格
    userForm.value[props.modelKey] = val.trim();
    // 重置下拉列表
    options.value = [];
    // 重置页码
    userForm.value.current = 1;
    await fetchData();
};

// 获取数据
const fetchData = async () => {
    try {
        if (userForm.value[props.modelKey]) {
            pullLoading.value = true;
            const result = await props.api(userForm.value);
            const records = result.data?.records || result.records || [];
            total.value = result.data?.total || result.total || 0;

            if (records.length > 0) {
                // 连接数组
                options.value = concat(options.value, records);
                emit('optionsChange', options.value);
            }
            pullLoading.value = false;
        }
    } catch (err) {
        console.error('fetch data error::: ', err);
        pullLoading.value = false;
    }
};

// 选择
const handleChange = (val: string | number | null) => {
    const option = options.value.find(item => item[props.valueKey] === val) || null;
    emit('change', option);
};

// 提供刷新选项的方法
const refreshOptions = () => {
    fetchData();
};

const clearSelected = () => {
    emit('clear');
};
// 提供清空选项的方法
const clearOptions = () => {
    options.value = [];
};

defineExpose({
    refreshOptions,
    clearOptions
});
</script>

<style scoped>
.flex-center-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer {
    width: 100%;
    text-align: center;
    line-height: 34px;
    font-size: 16px;
}
</style>

技术优势

1. 性能优化：避免一次性渲染大量 DOM 元素，显著提升页面响应速度
2. 用户体验：用户可以流畅地浏览和搜索海量数据
3. 资源节约：减少网络传输和内存占用
4. 扩展性强：支持自定义 API 接口和字段映射

使用示例

<template>
  <remote-select
    v-model="selectedId"
    :api="fetchUsers"
    model-key="username"
    value-key="id"
    label-key="name"
    placeholder="请输入用户名搜索"
    @change="handleUserChange"
  />
</template>

<script setup>
const selectedId = ref(null);

const fetchUsers = (params) => {
  return axios.get('/api/users', { params });
};

const handleUserChange = (option) => {
  console.log('Selected user:', option);
};
</script>

总结

通过远程搜索和无限滚动加载技术，我们可以轻松应对数千条甚至更多的数据展示需求。这种方案不仅解决了传统 Select 组件在大数据量下的性能问题，还提供了更好的用户体验。关键要点包括：

• 利用 remote 属性启用远程搜索模式
• 通过 v-infinite-scroll 实现滚动加载
• 合理设计分页和状态管理逻辑
• 提供良好的加载提示和错误处理

这套解决方案已在实际项目中得到验证，能够稳定处理大规模数据集，是构建高性能前端应用的重要技术手段。