Die Element-UI-Tabelle realisiert die Dropdown-Filterfunktion

Die Element-UI-Tabelle realisiert die Dropdown-Filterfunktion

In diesem Artikelbeispiel wird der spezifische Code zur Implementierung der Dropdown-Filterung in der Element-UI-Tabelle zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

1. Bei der Standardsortierung übergibt prop das zu sortierende Feld (Daten, die von der Schnittstelle zurückgegeben oder von Ihnen selbst definiert werden), und order stellt die Sortierung dar. Hier wird die absteigende Reihenfolge verwendet
2. Im Filterobjekt stellt Text den auf der Seite angezeigten Filtertext dar und Wert den zum Filtern verwendeten Wert. In der Methode wird filterHandler verwendet
3. Spaltenschlüssel. Wenn Sie das Filteränderungsereignis verwenden müssen, ist dieses Attribut erforderlich, um zu identifizieren, welche Spalte die Filterbedingung ist (an das Feld gebunden, das in der Schnittstelle sortiert werden soll).
4. Ob es sich bei den Datenfilteroptionen um Mehrfachauswahlen handelt (mehrere bedeutet, ob mehrere Elemente abgefragt werden sollen)
5. Filtermethoden: Die Methode, die zum Filtern der Daten verwendet wird. Wenn es sich um ein Filterelement mit Mehrfachauswahl handelt, wird es für jeden Datensatz mehrmals ausgeführt und jedes Element, das „true“ zurückgibt, wird angezeigt. Parameter sind Wert, Zeile, Spalte

<Vorlage>
<el-Tabelle
        :data="Tabellendaten"
        Stil="Breite: 100%"
        empty-text="Noch keine Daten"
        ref="Filtertabelle"
      >
        <el-table-column
          prop="Gerätetyp"
          label="Gerätetyp"
          Überlauf-Tooltip anzeigen
          Spaltenschlüssel="Gerätetyp"
          :Filter="[
            { text: 'Wetterausrüstung', value: 1 },
            { text: 'Emotionale Ausstattung', value: 0 },
          ]"
          :filter-method="filterHandler"
          :filter-multiple="true"
        >
          <template slot-scope="Umfang">
            <span v-if="scope.row.deviceType == 1">Wetterüberwachungsgeräte</span>
            <span v-if="scope.row.deviceType == 0">Ausrüstung zur Einsturzüberwachung</span>
            <span></span>
          </Vorlage>
        </el-Tabellenspalte>
      </el-Tabelle>
</Vorlage>

Methoden: {
// Header-Filterereignis filterHandler(value, row, column) {
      const-Eigenschaft = Spalte["Eigenschaft"];
      gibt Zeile [Eigenschaft] zurück === Wert;
    }
     }

Datentypen

Seiteneffekte

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • So legen Sie den Standardwert der Auswahl-Dropdown-Liste in Element-UI fest
  • Eine kurze Diskussion zum Problem der Auswahl von Werten im Dropdown-Feld „Auswählen“ in Vue Element
  • Beheben Sie das Problem, dass das Klickereignis der Dropdown-Menü-Unteroption in der Element-Benutzeroberfläche nicht ausgelöst wird
  • Lösung für das Problem, dass das Dropdown-Feld zur Element-UI-Auswahl keine Daten wiedergibt
  • Die Tabelle in vue+Element ist editierbar (Dropdown-Feld auswählen)
  • vue+element erstellt eine kleine Zusammenfassung der Hintergrund-Dropdown-Funktion el-dropdown
  • Detaillierte Erläuterung der Dropdown-Auswahl der Element-UI-Einstellungen zum Umschalten zwischen erforderlichen und nicht erforderlichen Feldern
  • Beheben Sie das Problem, dass der Standardwert nicht gelöscht werden kann, wenn Sie das Dropdown-Mehrfachauswahlfeld el-select in element-ui verwenden
  • So verwenden Sie das Dropdown-Menü „Element-Dropdown“
  • Vue+Element UI-Baumsteuerung integriert Dropdown-Funktionsmenü (Baum + Dropdown + Eingabe)

<<:  Eine dauerhafte Lösung für MySQLs Unfähigkeit, Chinesisch zu erkennen

>>:  ICO-Spiegelcode zu HTML hinzufügen (favicon.ico wird im Stammverzeichnis abgelegt)

Artikel empfehlen

Unicode-Signatur-BOM-Problem (Byte Order Mark) für UTF-8-Dateien

Beim Debuggen einer chinesischen Zen Cart-Website...

Detailliertes Tutorial zur Überwachung von Nginx/Tomcat/MySQL mit Zabbix

Inhaltsverzeichnis Zabbix überwacht Nginx Zabbix ...

9 Tipps für das Webseiten-Layout

<br />Verwandte Artikel: 9 praktische Vorsch...

innodb_flush_method-Wertmethode (Beispielerklärung)

Mehrere typische Werte von innodb_flush_method fs...

Häufig verwendete JavaScript-Array-Methoden

Inhaltsverzeichnis 1. filter() 2. fürJedes() 3. e...

mysql installer community 8.0.12.0 grafische anleitung zur installation

Dieses Tutorial beschreibt die Installation der M...

Detaillierte Erklärung der MySQL 30-Militärregeln

1. Grundlegende Spezifikationen (1) Es muss die I...

So richten Sie die Swap-Partition SWAP in Linux 7.7 ein

Die Swap-Partition des Linux-Systems, also die Sw...

Methode und Einführung der Tabellenindexdefinition in MySQL

Überblick Ein Index ist eine vom DBMS basierend a...

Gründe für den plötzlichen Leistungsabfall bei MySQL

Manchmal kann es vorkommen, dass eine SQL-Anweisu...

CSS3-Flip-Card-Nummern-Beispielcode

Ich habe heute eine Aufgabe von der Firma erhalte...

Beispielcode für die HTML-Formatierung von JSON

Ohne weitere Umschweife werde ich den Code direkt...