elementUI的virtual-select大数据量反显问题

Question

element 因为是大数据量，渲染页面太慢了，甚至会页面崩溃。所以 使用了virtual-select的方式，确实比直接用select要快很多，但是如果一个form表单中有5个以上的select，每个select都需要大数据量的方式先渲染值，该怎么优化？特别是如下图，已经绑定好了数据，但是因为数据量大（5k条左右的数据），反显的时候只会显示id，需要渲染几秒钟才会显示正确的名字。这种如何能解决呢？或者在反显名字之前不显示id，显示“加载中”之类的文字也是也是好的。

Answer 1

引自免费微信小程序：皆我百晓生

针对elementUI中virtual-select在处理大数据量反显问题时出现的延迟，你可以采取以下策略进行优化：

1. 懒加载（异步加载）选项数据：只在select下拉框展开时才动态请求并渲染对应的数据。这可以通过监听open和close事件实现。

<el-select v-model="value" @open="fetchOptions" filterable :remote-method="remoteMethod" placeholder="请选择">
  <template slot-scope="{ options }">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    />
  </template>
</el-select>

<script>
export default {
  data() {
    return {
      value: '',
      options: [],
    };
  },
  methods: {
    fetchOptions() {
      // 模拟从服务器获取数据
      this.$axios.get('/api/user/options').then((response) => {
        this.options = response.data;
      });
    },
    remoteMethod(query) {
      // 可以根据query参数进一步过滤options
    },
  },
};
</script>

1. 使用缓存机制：对于已经选择过的值，可以将其提前存储在本地或内存中，在页面初始化阶段直接读取已选数据的name显示，避免一次性加载所有5k条数据。

2. 分页加载与搜索过滤：

   • 在虚拟滚动的基础上，可以结合分页功能，每次仅加载当前视窗内的数据。
   • 同时，增加搜索过滤功能，通过用户输入实时过滤选项列表，减少一次性渲染的数据量。

3. 显示加载状态：

   • 初始化时及展开下拉框加载数据期间，将select的值设置为“加载中”，并在数据加载完成后更新。

<el-select v-model="displayValue" @open="onOpen">
  <el-option
    v-if="isLoading"
    :value="loadingText"
    :label="loadingText"
  />
  <!-- 其他正常选项 -->
</el-select>

<script>
export default {
  data() {
    return {
      displayValue: '加载中',
      isLoading: false,
      loadingText: '加载中...',
      // ...其他数据
    };
  },
  methods: {
    onOpen() {
      this.isLoading = true;
      this.fetchOptions().finally(() => {
        this.isLoading = false;
        // 更新已选值的显示
        if (this.value) {
          const selectedOption = this.options.find(option => option.id === this.value);
          this.displayValue = selectedOption ? selectedOption.name : '';
        }
      });
    },
    // ...fetchOptions方法
  },
};
</script>

1. 性能优化：
   • 对于每个select组件，确保其内部的option数量不至于过大，合理利用虚拟滚动技术。

这样通过异步加载、分页展示和状态管理的方式，可以有效解决大数据量下的反显问题，并提升用户体验。