Implementierung der Leistungsoptimierung des Element-Shuttle-Frames

v-infinite-scroll="Bild ab"
:unendliches Scrollen-sofort="falsch"

<el-checkbox-gruppe
        v-show="!hasNoMatch && Datenlänge > 0"
        v-model="geprüft"
        :size="Größe"
        :Klasse="{ 'ist-filterbar': filterbar }"
        Klasse="el-transfer-panel__list"
        v-infinite-scroll="Bild ab"
        :unendliches Scrollen-sofort="falsch"
      >
        <el-Kontrollkästchen
          Klasse="el-transfer-panel__item"
          :label="Element[Schlüsseleigenschaft]"
          :deaktiviert="Element[deaktivierteProp]"
          :Schlüssel="Element[Schlüsseleigenschaft]"
          v-for="Element in gefilterten Daten">
            <option-content :option="Artikel"></option-content>
        </el-checkbox>
</el-checkbox-group>

 v-for="Element in ShowData">

Daten (Daten) {
    const geprüft = [];
    this.showData = data.slice(0, this.pageSize);

    const gefilterteDataKeys = this.filteredData.map(
    (Artikel) => Artikel[diese.keyProp]
    );
    dies.überprüft.fürEach((Element) => {
    wenn (filteredDataKeys.indexOf(item) > -1) {
        geprüft.push(Artikel);
    }
    });
    this.checkChangeByUser = falsch;
    dies.geprüft = geprüft;
},
gefilterteDaten (gefilterteDaten) {
    this.showData = gefilterteDaten.slice(0, this.pageSize);
 }

Seite nach unten () {
    const l = this.showData.length;
    const totalLength = this.filteredData.length
    l < Gesamtlänge && 
    (diese.showData = diese.filteredData.slice(0, l + diese.pageSize > Gesamtlänge ?
    Gesamtlänge: l + diese.Seitengröße));
},

    Seite nach unten () {
      const totalLength = this.filteredData.length
      wenn((dieser.aktuellerIndex*diese.Seitengröße) < Gesamtlänge){
        dies.curIndex++
        const Ziellänge = this.curIndex * this.Seitengröße 
        const endPoint = Ziellänge > Gesamtlänge ? Gesamtlänge : Ziellänge
        const startPoint = endPoint - diese.Seitengröße > 0 ? endPoint - diese.Seitengröße : 0
        dies.showData = dies.filteredData.slice(Startpunkt, Endpunkt);
        this.$refs.scrollContainer.$el.scrollTop = "1px" //Leiste nach oben scrollen und Verbindung zur nächsten Seite herstellen. 0 kann Begrenzungsprobleme auslösen.}
    }

Der Befehl InfiniteScroll ermöglicht nur das Scrollen nach unten. Wir können diesen Befehl erweitern und den Listener mount(){ für das Scrollen nach oben hinzufügen.
        dies.$refs.scrollContainer.$el.addEventListener('scroll', diese.pageUp)
    },
    vorZerstören(){
        dies.$refs.scrollContainer.$el.removeEventListener('scroll', diese.pageUp)
    },

    Seite nach oben (e) {
      wenn(e.target.scrollTop === 0 && this.curIndex> 1){
        this.curIndex --
        const endPoint = this.curIndex * this.pageSize 
        const startPoint = (this.curIndex-1)* diese.Seitengröße 
        dies.showData = dies.filteredData.slice(Startpunkt, Endpunkt);
        const el = this.$refs.scrollContainer.$el
        el.scrollTop = el.scrollHeight – el.clientHeight – 1 // Nach unten scrollen und mit der vorherigen Seite verbinden. -1 verhindert Randprobleme.
      }
    },

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

    Daten(){
        ...
        dies.initScroll()
        ...
    },
    gefilterteDaten (gefilterteDaten) {
      ...
      dies.initScroll()
    }