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.