Eine kurze Diskussion über die Verwendung virtueller Listen zur Optimierung von Tabellen in el-table

Vorwort

Wir verwenden häufig Tabellen. Wenn die Datenmenge groß ist, können wir sie direkt paginieren. Es gibt jedoch zwangsläufig Situationen, in denen viele Elemente auf einer Seite angezeigt werden müssen oder keine Paginierung erforderlich ist.

Derzeit wäre es in Ordnung, wenn es nur zur Anzeige dient, aber wenn die Liste bearbeitet werden kann, bleibt sie sehr hängen. Wenn Sie auf das Dropdown-Feld klicken, dauert es lange, bis es angezeigt wird. Dies hat erhebliche Auswirkungen auf die Benutzernutzung.

Lösung

• Zuerst habe ich überlegt, ob das Einfrieren der Seite durch langsames Laden der Daten verursacht wurde, und habe daher die Scroll-Lademethode übernommen. Nachdem ich die Daten erhalten hatte, habe ich zuerst 100 Daten geladen. Das Laden der Daten in die Seite während des Scrollens kann den Druck verringern, beim ersten Mal zu viele Daten zu laden. Anfangs gab es kein Problem, aber als immer mehr Daten vorhanden waren, spürte ich deutlich, dass die Seite hängen blieb, wenn ich auf das bearbeitbare Dropdown-Feld in der Tabelle klickte.
• Später dachte ich, dass das Problem der Seitenverzögerung gelöst sein sollte, wenn ich nur die Daten in dem auf der Seite sichtbaren Bereich lade.

Konkrete Umsetzung

Holen Sie sich beim Laden 10/20 Daten (dies kann anhand der Höhe jeder Zeile/der Höhe der Seitenanzeigedaten oder eines festen Werts berechnet werden), überwachen Sie beim Scrollen die Bildlaufleiste und berechnen Sie die Daten der Anzeigeseite basierend auf der Bildlaufdistanz.

Voraussetzungen

Die Gesamthöhe der Liste

Gesamtdatenlänge × Höhe jeder Zeile

Wenn die Seite nur so hoch ist wie angezeigt, kann nicht gescrollt werden, um neue Daten zu erhalten.

Die Höhe jeder Reihe

Wenn die Höhe fest ist, können Sie einen festen Wert schreiben. Wenn die Höhe dynamisch ist, können Sie sie berechnen.

Scroll-Offset

Aktuelle Scrolldistanz – (aktuelle Scrolldistanz % Höhe jeder Zeile)

Der Startindex und der Endindex der auf der Seite angezeigten Daten

Der Startindex ist 0 am Anfang
Während des Scrollvorgangs ist der Startindex = Math.floor (die aktuelle Scrolldistanz / die Höhe jeder Zeile)

Codeschritte

<div Klasse="Haupt-Inneninhalt">
    <el-table :data="visibleData" :style="{'min-height': gradingEditor ? listHeight+'px':'100%'}" id="dataTable">

    </el-Tabelle>
</div>

berechnet: {
        // //Gesamthöhe der Liste listHeight () {
            // tableData sind die Gesamtdaten der Schnittstelle. return this.tableData.length * this.itemSize;
        },
        // //Der Stil, der dem Offset entspricht
        getTransform () {
            gibt `translate3d(0,${this.startOffset}px,0)` zurück;
        },
        //Die aktuellen Daten der Anzeigeliste abrufen visibleData () {
            let tableBody = document.querySelector('#dataTable >.el-table__body-wrapper')
            wenn (Tabellentext) {
                tableBody.style.transform = this.getTransform
            }
            gib dies.tableData.slice zurück(diesen.start, Math.min(diesen.end, diese.tableData.length));
        }
    },
Daten() {
    zurückkehren {
        Tabellendaten:[],
        //Offset startOffset: 0,
        //Startindex start: 0,
        //Endindex end: null,
    };
},
Methoden:{
    handleScroll () {
        // Dies ist ein Scrollfeld. Wenn die Scrollposition eine Tabelle ist, ändern Sie sie einfach entsprechend. Es gibt auch eine Stelle, an der ein Offset zugewiesen werden kann. let scrollTop = document.getElementById('main-inner-content').scrollTop;
        // //Der Startindex zu diesem Zeitpunkt this.start = Math.floor(scrollTop / this.itemSize);
        wenn (dieser.start < 0) dieser.start = 0;
        // //Der Endindex zu diesem Zeitpunkt this.end = this.start + 10;
        // //Der Offset zu diesem Zeitpunkt this.startOffset = scrollTop - (scrollTop % this.itemSize);
        dieser.startOffset = dieser.startOffset > diese.Elementgröße? dieser.startOffset – diese.Elementgröße: 0;
    }
},
montiert(){
    window.addEventListener("scroll", this.handleScroll, true);
},
zerstört()
    window.removeEventListener('scroll', this.handleScroll, true) // Scroll-Ereignisse der Bildlaufleiste löschen}

Beim Scrollen der Seite werden nur zehn Daten geladen und die Seitenanzeige wird durch den Offset bestimmt.

Frage

Ich lege die Gesamthöhe für die gesamte El-Tabelle fest und lege dann den Versatz für das Feld des Listenelements darunter fest. Wenn die Seite Daten erneut abrufen muss, ohne sie zu aktualisieren (z. B. beim Blättern), müssen die Daten initialisiert werden. Andernfalls zeigt die Seite direkt die vorherigen Daten an oder die Seite ist leer.

document.querySelector('#Haupt-Inneninhalt').scrollTop = 0
dies.start = 0
this.startOffset = 0
dies.ende = dies.start + 10;
let tableBody = document.querySelector('#dataTable >.el-table__body-wrapper')
tableBody.style.transform = this.getTransform

Zur Vereinfachung der Berechnung und Verwendung verwende ich für jede Zeile der Seite eine feste Höhe und verwende die Methode zum Auslassen von Überschüssen. Nach der Bereitstellung der Vorabversionsumgebung werden Sie jedoch feststellen, dass der Code -webkit-box-orient: vertical direkt verschwunden ist und nicht angezeigt wird.
Lösung: Schreiben Sie den Inline-Stil style="-webkit-box-orient: vertical" und es wird funktionieren

.omit-text {
    Zeilenumbruch: Wort umbrechen; 
    Überlauf: versteckt; 
    Textüberlauf: Auslassungspunkte; 
    Anzeige: -webkit-box; 
    -webkit-box-orient: vertikal;  
    -Webkit-Leitungsklemme: 2; 
}

siehe
https://juejin.cn/post/6844903982742110216#heading-4
https://codesandbox.io/s/virtuallist-1-forked-sd2xn?file=/src/components/VirtualList.vue:1487-1652

Damit ist dieser Artikel über die Verwendung virtueller Listen in el-table zur Optimierung von Tabellen abgeschlossen. Weitere Inhalte zur el-table-Optimierung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!