el-selectデータが多すぎて怠惰にロードされた解決(loadmore)

el-selectデータ過多処理方式
日常のプロジェクトでは、el-selectコンポーネントの使用頻度は非常に高いです。データが多すぎるとレンダリング時間が非常に長いです。ここでいくつかの処理方法を提供します。
リモート検索
コンポーネントはリモート検索方式を提供しています。つまりあなたが入力した結果にマッチするオプションです。
ドロップダウンローディングloadMore
怠惰にロードして、selectが最後までスクロールする時、また一部のデータを要求して、現在のデータに加入します。
あるコンポーネントの中:

<template>
  <el-select
    v-model="value"
    placeholder="   "
    filterable
    multiple
    v-el-select-loadmore="loadmore"
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.label"
      :value="item.id">
    </el-option>
  </el-select>
</template>
 
export default {
  directives: {
    'el-select-loadmore': {
      bind(el, binding) {
        //   element-ui    scroll  
        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
        SELECTWRAP_DOM.addEventListener('scroll', function () {
          /**
          * scrollHeight         (  )
          * scrollTop             ,   ,         ,                     ,    scrollTop     0.
          * clientHeight          (  )
          *         ,       true,      false:
          * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
          */
          const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
          if (condition) {
            binding.value();
          }
        });
      }
    }
  },
  data() {
    return {
      value: '',
      options: [],
      formData: {
        pageIndex: 1,
        pageSize: 20,
      }
    };
  },
  mounted() {
    this.getList(this.formData);
  },
  methods: {
    loadmore() {
      this.formData.pageIndex++;
      this.getList(this.formData);
    },
    getList(formData) {
      //          ,      
      const _res = [1, 2, 3]; //        
      this.options = [...this.options, ..._res];
    }
  }
};

このようにしてローリング怠惰ローディングを行い、具体的な詳細は適用時に修正されます。
問題
このようにレンダリングの問題が解決されたら、次に問題が発生します。つまり、あなたのvalueが選択されたデータの後に、ページ数の大きなデータがあります。
ページ数が小さい時、Ooptionsデータの中に現在のvalueがない場合、valueは取得したidとして表示されます。
選択した後、現在のIDとケーブルを保存します。今度来たら、現在の部品を持ち込んで、マニュアルでoptionsに置いてください。この問題を解決します。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。