Detaillierte Erläuterung der Anwendungsszenarien von Filtern in Vue

Detaillierte Erläuterung der Anwendungsszenarien von Filtern in Vue

filter werden im Allgemeinen verwendet, um bestimmte Werte zu filtern. Wenn mein Feld beispielsweise leer ist, ich aber im Frontend „–“ anzeigen möchte, kann ich es verwenden.

Kürzlich bin ich auf die Anforderung gestoßen, Berechtigungen für die Anzeige bestimmter Felder in anderen Formularen festzulegen, z. B. die Anzeige des Betrags, der als „***“ ausgeblendet werden muss.

1. Holen Sie sich die Betragsberechtigung

2. Filtern Sie die Felder, die die Bedingungen erfüllen, durch Filter

3. Geben Sie den versteckten Stil zurück

Schauen Sie sich den Code an:

//Im Übrigen schau einfach, was ich markiert habe. //scope.row holt die aktuelle Zeile <template slot-scope="scope">
            <template v-if="item.formType == 'label'">
              <el-Schaltfläche
                v-if="Artikel.link!=undefined"
                Typ="Text" Größe="klein" @click="handleColumnClick(item.link,scope.row)">
                //Filter wird im Allgemeinen nicht zum Filtern verwendet|
                //showLabelValue wird nicht ausgegeben //Der Filter, der einem Parameter der Methode entspricht, hat zwei Parameter //Der erste ist der von der vorherigen Spalte zurückgegebene Wert //Der N-1. ist der Wert, den Sie übergeben möchten {{ scope.row | showLabelValue(item) | canViewAmount(canViewAmount,xtType,item) }}
              </el-button>
              <Vorlage v-else>
                {{ scope.row | showLabelValue(Element) | canViewAmount(canViewAmount,xtType,Element) }}
              </Vorlage>
            </Vorlage>
</Vorlage>
Standard exportieren {
 Filter:
 //row sind die von scope.rowshowLabelValue(row,item){ zurückgegebenen Daten.
 Rückgabewert
 }
 //Wert, canView-Berechtigung, xtType welche Seite, Artikellistendaten //Wenn showLabelValue einen Wert zurückgibt, ist der entsprechende canViewAmount-Parameterwert „Wert“
    canViewAmount(Wert, canView, xtType, Artikel) {
    //Wenn die Bedingungen erfüllt sind, wird „***“ angezeigt (nur anzeigen) und der in der Datenbank gespeicherte Inhalt ist immer noch die ursprüngliche Liste, wenn (!canView && xtType == 'salesOrder') {
        wenn (Artikelfeld == 'Preis ohne Steuer' || Artikelfeld == 'Betrag ohne Steuer' || Artikelfeld == 'Preis' || Artikelfeld == 'Betrag') {
          zurückkehren '***'
        }
      }
      wenn (!canView && xtType == 'Projekt') {
        wenn (Artikel.Feld == 'Betrag' || Artikel.Feld == 'Betrag ohne Steuer') {
          zurückkehren '***'
        }
      }
      Rückgabewert
    }
  },

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!

Das könnte Sie auch interessieren:
  • So verwenden Sie Filter in VUE
  • Detaillierte Erklärung des Problems von Vue-Filtern und -Direktiven, die auf diese
  • Das Problem, dass dies bei der Verwendung von Filtern in Vue nicht definiert ist
  • Lösen Sie das Problem, dass Vue-Filter dieses Objekt nicht abrufen können
  • Detaillierte Erläuterung der Daten- und Ereignisbindung sowie der Filterfilter von Vue
  • So verwenden Sie den Vue-Filter
  • Zusammenfassung der vier Verwendungen des Vue-Filters

<<:  Das Problem, dass jquery.form.js den Zugriff im IE verweigert und der Input-Upload-Button aktiv angeklickt werden muss

>>:  Detaillierte Erklärung zur Verwendung der Funktionen IF(), IFNULL(), NULLIF() und ISNULL() in MySQL

Artikel empfehlen

Schritte zur Vue-Batch-Update-DOM-Implementierung

Inhaltsverzeichnis Szeneneinführung Hohe Reaktion...

Einige Frontend-Grundlagen (HTML, CSS) aus der Praxis

1. Die Div-CSS-Maushandform ist Cursor:Zeiger; 2. ...

Eine kurze Diskussion über die Verwendung und Analyse von Nofollow-Tags

Kontroverse um Nofollow Zwischen Zac und Guoping ...

Ein nützliches mobiles Scrolling-Plugin BetterScroll

Inhaltsverzeichnis Machen Sie das Scrollen flüssi...

Informationen zur Verwendung des Iconfont-Vektorsymbols von Alibaba in Vue

Es gibt viele Importmethoden im Internet, und die...

Sublime Text - Empfohlene Methode zum Festlegen von Browser-Tastenkombinationen

Codeeffekte werden häufig in unterschiedlichen Br...

So führen Sie das React-Projekt auf dem offiziellen WeChat-Konto aus

Inhaltsverzeichnis 1. Verwenden Sie das „A“-Tag, ...

Einfaches Setup von VMware ESXi6.7 (mit Bildern und Text)

1. Einführung in VMware vSphere VMware vSphere is...