要素シャトルフレームのパフォーマンス最適化の実装

v-infinite-scroll="ページダウン"
:infinite-scroll-immediate="false"

<el-チェックボックスグループ
        v-show="!hasNoMatch && data.length > 0"
        v-model="チェック済み"
        :size="サイズ"
        :class="{ 'is-filterable': フィルタ可能 }"
        クラス="el-transfer-panel__list"
        v-infinite-scroll="ページダウン"
        :infinite-scroll-immediate="false"
      >
        <el-チェックボックス
          クラス="el-transfer-panel__item"
          :label="item[キープロパティ]"
          :disabled="アイテム[disabledProp]"
          :key="アイテム[キープロパティ]"
          v-for="filteredData 内のアイテム">
            <オプションコンテンツ:オプション="項目"></オプションコンテンツ>
        </el-チェックボックス>
</el-チェックボックスグループ>

 v-for="showData 内の項目">

データ（データ）{
    const チェック = [];
    this.showData = data.slice(0, this.pageSize);

    const フィルターデータキー = this.filteredData.map(
    (アイテム) => アイテム[this.keyProp]
    );
    this.checked.forEach((item) => {
    if (filteredDataKeys.indexOf(item) > -1) {
        チェック済み.push(アイテム);
    }
    });
    this.checkChangeByUser = false;
    this.checked = チェック済み;
},
フィルターされたデータ (フィルターされたデータ) {
    this.showData = フィルタリングされたデータ.slice(0, this.pageSize);
 }

ページダウン（）{
    定数 l = this.showData.length;
    定数 totalLength = this.filteredData.length
    l < 合計長さ && 
    (this.showData = this.filteredData.slice(0, l + this.pageSize > totalLength ?
    合計長さ: l + this.pageSize));
},

    ページダウン（）{
      定数 totalLength = this.filteredData.length
      if((this.curIndex*this.pageSize) < 合計長さ){
        this.curIndex++
        定数 targetLength = this.curIndex * this.pageSize 
        const endPoint = targetLength > totalLength ? totalLength : targetLength
        const startPoint = endPoint - this.pageSize > 0 ? endPoint - this.pageSize : 0
        this.showData = this.filteredData.slice(startPoint, endPoint);
        this.$refs.scrollContainer.$el.scrollTop = "1px" //バーを一番上までスクロールして次のページに接続します。0 は境界の問題を引き起こす可能性があります。}
    }

InfiniteScrollコマンドは下方向のスクロールのみを提供します。このコマンドを拡張して、上方向のスクロールリスナーを追加することができます。
        this.$refs.scrollContainer.$el.addEventListener('スクロール'、this.pageUp)
    },
    beforeDestroy(){
        this.$refs.scrollContainer.$el.removeEventListener('scroll', this.pageUp)
    },

    ページアップ(e){
      if(e.target.scrollTop === 0 && this.curIndex> 1){
        this.curIndex --
        定数エンドポイント = this.curIndex * this.pageSize 
        定数 startPoint = (this.curIndex-1)* this.pageSize 
        this.showData = this.filteredData.slice(startPoint, endPoint);
        const el = this.$refs.scrollContainer.$el
        el.scrollTop = el.scrollHeight - el.clientHeight - 1 // 一番下までスクロールして前のページに接続します。-1 にすると境界の問題を回避できます。
      }
    },

    initScroll(){
        this.curIndex = 1
        this.$refs.scrollContainer.$el.scrollTop = 0
    },

    データ（）{
        ...
        this.initScroll()
        ...
    },
    フィルターされたデータ (フィルターされたデータ) {
      ...
      this.initScroll()
    }