Element における複数データ読み込み最適化の実装

<テンプレート>
  <div class="app">
    <el-dialog title="タイトル" :visible.sync="relatedOpen" :append-to-body="true" width="500px">
      <el-row :gutter="16">
        <el-col :span="20">
          <el-選択
            v-model="値"
            フィルター可能
            クリア可能
            スタイル="幅:100%"
            placeholder="選択してください"
            :loading="検索読み込み"
            :filter-method="フィルターメソッド"
            v-el-select-loadmore="loadMore(範囲番号)"
            @visible-change="可視変更"
          >
            <el-option v-for="item in options.slice(0, rangeNumber)" :key="item.key" :label="item.value" :value="item.key"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="submit">OK</el-button>
        </el-col>
      </el-row>
    </el-ダイアログ>
  </div>
</テンプレート>

  // カスタムディレクティブ: {
    "el-select-loadmore": (el, バインディング) => {
      // 要素 UI によって定義されたスクロール要素を取得します。const SELECTWRAP_ROM = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap");
      （SELECTWRAP_ROM）の場合{
    // スクロールイベントを追加 SELECTWRAP_ROM.addEventListener("scroll", function() {
      // スクロールを決定します const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
          条件 && binding.value();
        });
      }
    }
  }

エクスポートデフォルト{
  データ（） {
    戻る {
      関連Open: false,
      options: [] /* ドロップダウンボックスの値を選択する */,
      コースリスト: [],
      範囲番号: 10,
      searchLoad: false /* ドロップダウンボックスの読み込み状態*/,
      価値： ""、
      タイマー: null
    };
  },
  作成された() {
    オプションを取得します。
  },
  メソッド: {
    // オンデマンドロード loadMore(n) {
      戻り値 () => (this.rangeNumber += 5);
    },
    // コースウェアをフィルタリングする filterMethod(query) {
      this.timer != null の場合、 this.timer のタイムアウトをクリアします。
      !this.searchLoad && (this.searchLoad = true);
      this.timer = setTimeout(() => {
        this.options = !!query ? this.courseList.filter(el => el.value.toLowerCase().includes(query.toLowerCase())): this.courseList;
        タイムアウトをクリアします(this.timer);
        this.searchLoad = false;
        this.rangeNumber = 10;
        this.timer = null;
      }, 500);
    },
    // 選択ドロップダウンボックスの表示と非表示をリッスンする visibleChange(flag) {
      // 表示時にリストフラグを初期化します && this.filterMethod("");
      // デフォルト値を初期化します this.rangeNumber = 10;
    },
    // オプションを取得する async getOptions() {
      searchCourseware() を待機します。その後 (res => {
        リストを res.data とします || [];
        // デフォルトで表示されるデータ this.options = list;
        // 元のデータ this.courseList = list;
      });
    }
  }
}