Implementierung der Optimierung für das Laden ausgewählter Mehrfachdaten in Element

Szenario

Ich habe vor kurzem mit der Entwicklung eines Hintergrundverwaltungssystems auf Basis von ElementUI begonnen und dabei versehentlich ein Problem mit der Dropdown-Auswahl „el-select“ entdeckt. Wenn die Datenmenge in den „Optionen“, die die Dropdown-Optionen rendern, zu groß ist (die Anzahl der Dateneinträge in diesem Projekt hat 10.000 überschritten), bleibt der Dropdown-Selektor hängen, insbesondere bei der Fuzzy-Matching-Filterung. Beim Initialisieren des Selektors erfolgt beim Klicken keine Reaktion, und manchmal müssen Sie mehrere Male klicken, bevor das Popup-Fenster „Dialog“ angezeigt wird (dieser Dropdown-Filter ist im Popup-Fenster implementiert). Nachdem ich viele Blog-Notizen gelesen hatte, fand ich endlich eine Lösung für das Problem. Ich werde diesen Optimierungsplan jetzt als Notiz aufzeichnen, damit ich leicht darauf zurückgreifen kann, wenn ich in Zukunft auf ähnliche Probleme stoße.

Hinweis: Basierend auf dem ausgewählten Dropdown-Filter wird durch benutzerdefinierte Ereignisse eine unscharfe Suchübereinstimmung erreicht.

Es gibt zwei Möglichkeiten:

• Die erste besteht darin, alle Daten abzurufen und die abgerufenen Daten nach den eingegebenen Schlüsselwörtern zu filtern.
• Die zweite Möglichkeit besteht darin, die Back-End-Schnittstelle dynamisch über das Eingabeschlüsselwort anzufordern und die Dropdown-Optionen dynamisch über die von der Schnittstelle zurückgegebenen Daten zu rendern.

Code-Implementierung

Beispiel einer Vue-Komponente

<Vorlage>
  <div Klasse="App">
    <el-dialog title="Titel" :visible.sync="relatedOpen" :append-to-body="true" width="500px">
      <el-row :gutter="16">
        <el-col :span="20">
          <el-Auswahl
            v-Modell="Wert"
            filterbar
            löschbar
            Stil="Breite:100%"
            Platzhalter="Bitte auswählen"
            :loading="SucheLaden"
            :filter-method="Filtermethode"
            v-el-select-loadmore="Weitere laden(Bereichsnummer)"
            @visible-change="sichtbareÄnderung"
          >
            <el-option v-for="Element in Optionen.slice(0, Bereichsnummer)" :Schlüssel="Element.Schlüssel" :label="Element.Wert" :Wert="Element.Schlüssel"></el-option>
          </el-Auswahl>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="submit">OK</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</Vorlage>

• „v-el-select-loadmore“ ist eine Datenladeanweisung, die in einer benutzerdefinierten Anweisung gekapselt ist. Sie wurde entwickelt, um das Problem der Verzögerung zu lösen und zu optimieren, wenn der Dropdown-Selektor von ElementUI zu viele Daten lädt.
• „Filtermethode“ ist ein benutzerdefiniertes Attribut des Dropdown-Selektors, das die Eingabevariablen überwachen und dynamisch Daten basierend auf den Variablen abrufen kann.

  // Benutzerdefinierte Anweisungen: {
    "el-select-loadmore": (el, Bindung) => {
      // Holen Sie sich das durch das Element UI definierte Scroll-Element const SELECTWRAP_ROM = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap");
      wenn (SELECTWRAP_ROM) {
    // Scroll-Ereignis hinzufügen SELECTWRAP_ROM.addEventListener("scroll", function() {
      // Scrollen bestimmen const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
          Bedingung und Bindungswert();
        });
      }
    }
  }

Die entsprechende Datenfunktion

Standard exportieren {
  Daten() {
    zurückkehren {
      verbundenOpen: false,
      options: [] /* Wähle den Wert des Dropdown-Feldes */,
      Kursliste: [],
      Bereichsnummer: 10,
      searchLoad: false /* Ladezustand der Dropdown-Box*/,
      Wert: "",
      Timer: null
    };
  },
  erstellt() {
    dies.getOptions();
  },
  Methoden: {
    // Bei Bedarf laden loadMore(n) {
      return () => (diese.Bereichsnummer += 5);
    },
    // Kursmaterial filtern filterMethod(query) {
      wenn (dieser.timer != null) clearTimeout(dieser.timer);
      !diese.searchLoad && (diese.searchLoad = true);
      dieser.timer = setTimeout(() => {
        diese.Optionen = !!Abfrage ? diese.Kursliste.Filter(el => el.Value.toLowerCase().Includes(Query.toLowerCase())) : diese.Kursliste;
        : LöscheTimeout(diesen.Timer);
        this.searchLoad = falsch;
        diese.Bereichsnummer = 10;
        dieser.timer = null;
      }, 500);
    },
    // Auf das Anzeigen und Ausblenden des Auswahl-Dropdown-Felds achten visibleChange(flag) {
      // Listenflag beim Anzeigen initialisieren && this.filterMethod("");
      // Standardwert initialisieren this.rangeNumber = 10;
    },
    // Optionen abrufen async getOptions() {
      warte auf searchCourseware().then(res => {
        lass Liste = res.data || [];
        //Standardmäßig angezeigte Daten this.options = list;
        //Originaldaten this.courseList = Liste;
      });
    }
  }
}

Notiz:

• Die Rolle des Timers besteht darin, zu verhindern, dass gefilterte Schlüsselwörter zu häufig eingegeben werden, da dies zu einer vorzeitigen Datenreaktion führt. Da alle Daten gleichzeitig abgerufen werden, werden sie nur zum Rendern und Laden von Daten verwendet.
• Die Ereignisfunktion des Selektors wird hauptsächlich verwendet, um die Standardanzeigedaten zu initialisieren, wenn „Fokus erhalten“ und „Fokus verlieren“. Wenn es sich um eine Netzwerkanforderung handelt, ist hier eine „Funktionsabfang“-Verarbeitung erforderlich. Der Zweck besteht darin, die Anzahl der Schnittstellenanforderungen zu verringern.

Zusammenfassen:

Ich habe in eine neue Arbeitsumgebung gewechselt und beginne nun mit der Arbeit am Backend-Verwaltungssystem. Dabei werde ich in unterschiedlichem Ausmaß auf verschiedene Probleme stoßen. Wie immer werde ich die während der Entwicklung aufgetretenen Probleme in meinen Notizen festhalten. Ein gutes Gedächtnis ist nicht so gut wie ein schlechter Stift. Ich hoffe, jetzt die Samen zu pflanzen und im nächsten Herbst die Früchte zu ernten. JY

Dies ist das Ende dieses Artikels über die Implementierung des optimierten Ladens mehrerer ausgewählter Daten in Element. Weitere relevante Inhalte zum Laden mehrerer ausgewählter Daten in Element 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!