Lösung für das Problem, dass es beim Klicken auf „Alles auswählen“ in der Shuttle-Box von Element bei großen Datenmengen hängen bleibt

Phänomen: Wir haben 9999 Daten gerendert. Da die Übertragungskomponente alle Daten auf einmal rendert, ist es normal, dass das Rendering Dutzende von Sekunden lang hängen bleibt. Daher ist Lazy Loading oder Paging die grundlegende Operation, und Lösung 2 ist die Paging-Operation.

Die Lazy-Loading-Methode kann das unendliche Scrollen von EUI nutzen: https://element.eleme.cn/

Auch nach dem Lazy Loading dauert das Klicken auf „Alles auswählen“ immer noch mehr als 6 Sekunden. Daher behebt Lösung 1 das Problem, dass der Benutzer auch nach Lazy Loading oder Paging-Vorgängen beim Klicken auf die Seite immer noch eine Verzögerung von einigen Sekunden feststellt.

Dies liegt daran, dass die Leistung des Codes „Alles auswählen“ im Übertragungsquellcode schlecht ist. Lösung 1 besteht darin, den Übertragungsquellcode zu ändern.

Ich habe einen PR eingereicht, die Adresse lautet: hhttps://github.com/ElemeFE/element/pull/20282

Lösung 1: Kopieren Sie die Übertragungskomponente von EUI, ändern Sie sie und fügen Sie sie dann in das Projektverzeichnis ein

Verzeichnispfad der EUI-Übertragungskomponente: node_modules\element-ui\packages\transfer. Kopieren Sie den Ordner und legen Sie ihn dann im Vue-Projektpfad ab.

Führen Sie die öffentliche Komponentenübertragung dort ein, wo die EUI-Übertragung aufgerufen wird.

<Vorlage>
  <Transfer v-model="Wert" :data="Daten"></Transfer>
</Vorlage>

<Skript>
Transfer von '../common/transfer' importieren
Standard exportieren {
  Komponenten: {
    Überweisung:Überweisung
  },
 //Ausgelassen</script>

Beginnen Sie mit der Änderung des Transfercodes:

Öffnen Sie die Komponente src/common\transfer\src\transfer-panel.vue.

Suchen Sie die Funktion updateAllChecked. Die Funktion von updateAllChecked lautet: Wir müssen eine Entscheidung treffen, wann wir auf ein Element klicken. Siehe die Codekommentare.

updateAllChecked() {
      /*
        Der Quellcode this.checkableData ist ein Array von Objekten. Was wir brauchen, ist der Schlüssel in jedem Objekt.
        CheckableDataKeys speichert also das Array der Schlüssel des Objekts, also die Sammlung von „Elementen, die durch Anklicken ausgewählt werden können“*/
      lass start = neues Date().getTime();
      const checkableDataKeys = this.checkableData.map(
        Artikel => Artikel[this.keyProp]
      );

      this.allChecked =
        checkableDataKeys.length > 0 &&
      /*
        Seit 2.4.0 hat sich nichts geändert. Ich muss sagen, dass das Entwicklungsteam wirklich beschäftigt ist. this.checked speichert das Array der Elemente, die der Benutzer durch Klicken auf das Element ausgewählt hat.
        Wenn this.checked für jedes Element in checkableDataKeys vorhanden ist, ist allChecked wahr, aber wenn ein beliebiges Element nicht vorhanden ist, ist es falsch. allChecked gibt an, ob alle ausgewählt sind.
        Die Zeitkomplexität beträgt hier n^2, was Blödsinn ist*/
      checkableDataKeys.every(Element => this.checked.indexOf(Element) > -1);
      console.log("updateAllCheckedEnd", neues Date().getTime() - Start);

    },

Schauen wir uns die Zeit an, die der Quellcode benötigt:

Dann beginnen wir, die Funktion updateAllChecked neu zu schreiben:

updateAllChecked() {
      /*
        Änderung Hier ist der Algorithmus zum Erstellen von Elementobjekten in einem effizienten Array, das Elemente eines anderen Arrays enthält*/
      lass start = neues Date().getTime();
      let checkableDataKeys = this.checkableData.map((item) => {
        Lassen Sie keyProps = {};
        keyProps[item[this.keyProp]] = wahr;
        keyProps zurückgeben;
      });
      //Verwende die kv-Korrespondenz des Objekts, n(1), um herauszufinden, ob ein Element im Array this.allChecked = vorhanden ist
        checkableDataKeys.length > 0 &&
        diese.überprüfte.Länge > 0 &&
        this.checked.every((item) => checkableDataKeys[item]);
      // Der oben kommentierte Quellcode ist der zeitaufwändigste, achten Sie also einfach weiter auf den Zeitaufwand console.log("updateAllCheckedEnd", new Date().getTime() - start);
    },

Auf diese Weise wird die Leistung viel höher sein. Tatsächlich handelt es sich nur um ein grundlegendes Front-End-Algorithmusproblem. Es scheint, dass die Entwickler von EUI es nicht geschrieben haben, weil sie faul waren.

Schauen wir uns die nach der Änderung des Codes benötigte Zeit an:

Offensichtlich viel schneller.

Als nächstes folgt die Datei: \src\common\transfer\src\main.vue. Suchen Sie die Funktion addToRight

hinzufügenNachRechts() {
      Lassen Sie aktuellenWert = this.value.slice();
      const ZuBeVerschiebende Elemente = [];
      const Schlüssel = diese.props.Schlüssel;
      lass start = neues Date().getTime();
      // Hier gibt es zwei Schleifen, was lange dauert this.data.forEach((item) => {
        const itemKey = item[Schlüssel];
        Wenn (
          this.leftChecked.indexOf(itemKey) > -1 &&
          dieser.Wert.indexOf(itemKey) === -1
        ) {
          Zu verschiebende Elemente.push(Elementschlüssel);
        }
      });
      console.log("addToRightEnd", neues Date().getTime() - Start);

      aktuellerWert =
        this.targetOrder === "Umschaltung aufheben"
          ? ZuBeVerschiebendeElemente.concat(aktuellerWert)
          : aktuellerWert.concat(ZuVerschiebendeElemente);
      dies.$emit("Eingabe", aktuellerWert);
      dies.$emit("ändern", aktuellerWert, "rechts", dies.linksGeprüft);
    },

Zeit bis zur ausgewählten Verschiebung:

Ändern Sie die Funktion addToRight.

hinzufügenNachRechts() {
      lass start = neues Date().getTime();
      Lassen Sie aktuellenWert = this.value.slice();
      const ZuBeVerschiebende Elemente = [];
      const Schlüssel = diese.props.Schlüssel;

      // Ändern Sie let leftCheckedKeyPropsObj = {};
      dies.leftChecked.forEach((Element, Index) => {
        leftCheckedKeyPropsObj[Element] = wahr;
      });

      Lassen Sie valueKeyPropsObj = {};
      dieser.Wert.fürJeden((Element, Index) => {
        valueKeyPropsObj[Element] = wahr;
      });
      diese.data.forEach((item) => {
        const itemKey = item[Schlüssel];
        wenn ( leftCheckedKeyPropsObj[itemKey] und !valueKeyPropsObj[itemKey] ) {
          Zu verschiebende Elemente.push(Elementschlüssel);
        }
      });
      console.log("addToRightEnd", neues Date().getTime() - Start);

      aktuellerWert =
        this.targetOrder === "Umschaltung aufheben"
          ? ZuBeVerschiebendeElemente.concat(aktuellerWert)
          : aktuellerWert.concat(ZuVerschiebendeElemente);
      dies.$emit("Eingabe", aktuellerWert);
      dies.$emit("ändern", aktuellerWert, "rechts", dies.linksGeprüft);
    },

Ausgewählte Zeit verschieben:

Der Zeitaufwand wird deutlich reduziert. Die Prämisse dieser Lösung ist Lazy Loading bzw. Paging. Ich habe es mit 100.000 Datenmengen ausprobiert und es war immer noch gut.

Lösung 2: Paging-Betrieb

analysieren

Die checkBox-Gruppe verfügt über ein Check-Array (zum Aufzeichnen des ausgewählten Element-Arrays) und ein RenderItem-Array (das tatsächlich gerenderte Element. Aufgrund der Seitennummerierung werden nicht alle Elemente gerendert). Wenn sich im `RenderItem-Array` im `Check-Array` ein Element befindet, wird das Element als ausgewählt markiert, andernfalls wird es abgewählt. Das Implementierungsprinzip besteht einfach darin, das Prüfarray mit dem RenderItem-Array zu vergleichen.

Wenn der Benutzer auf „Alles auswählen“ klickt, wird das Prüfarray zu einem Array mit Zehntausenden von Daten. Zu diesem Zeitpunkt haben wir 100 Daten gerendert, sodass wir eine 10000 x 100-Level-Schleife ausführen müssen, weshalb dies einige Zeit in Anspruch nimmt.

Tatsächlich rendert die Seite nur 100 Daten. Wir müssen nicht Zehntausende Daten auf einmal in das Prüfarray einfügen. Wir müssen nur diese 100 Arrays in das Prüfarray einfügen und diese 100 Daten wie ausgewählt anzeigen. Wenn die Seite weitere Daten rendert, fügen Sie die neuen Daten einfach zum Prüfarray hinzu. Dadurch wird die Leistung erheblich verbessert.

planen

Die von mir gewählte Lösung ist wie folgt:

1. Es werden nur 100 Datensätze angezeigt.

2. Ziehen Sie nach unten, um die nächsten 100 Datenelemente anzuzeigen, und ziehen Sie nach oben, um die vorherigen 100 Datenelemente anzuzeigen.

3. Wenn Sie zum Erhöhen der Rendering-Daten nach unten oder oben ziehen, fügen Sie die neuen Daten dem Prüfarray hinzu.

Dies sind nur allgemeine Ideen, ich habe sie bereits umgesetzt. Es gibt noch viele Details zu klären. Wenn Sie es perfektionieren möchten, müssen Sie die Schlüssel-Wert-Paare des Objekts verwenden, um das Löschen usw. zu implementieren.

Dies ist das Ende dieses Artikels über die Lösung des Problems des Einfrierens der Shuttle-Box von Element bei großen Datenmengen. Weitere Informationen zum Einfrieren der Shuttle-Box von Element finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!