Anzeige der Tabellenliste für die Front-End-Anwendungsentwicklung von Vue Element
1. Effekt der ListenabfrageschnittstelleBevor wir eine Codeverarbeitungslogik einführen, verschaffen wir uns zunächst ein sensorisches Verständnis, veröffentlichen ein Rendering und stellen dann nacheinander die Verarbeitungsschritte und Vorsichtsmaßnahmen vor.
Die herkömmliche Listenanzeigeoberfläche ist im Allgemeinen in mehrere Bereiche unterteilt: Einer ist der Abfragebereich, einer ist der Listenanzeigebereich und einer ist der Paging-Komponentenbereich unten. Der Abfragebereich wird hauptsächlich für das Layout allgemeiner Bedingungen verwendet, und es werden einige globale oder Stapeloperationen hinzugefügt, wie z. B. Importieren, Exportieren, Hinzufügen, Stapeln hinzufügen, Stapeln löschen und andere Schaltflächen; der Hauptlistenanzeigebereich ist relativ komplex und erfordert eine benutzerfreundlichere Anzeige verschiedener Daten. Er kann in Kombination mit Tags, Symbolen, Schaltflächen und anderen Schnittstellenelementen angezeigt werden. Die Liste enthält im Allgemeinen einige Operationen zum Verarbeiten einzeiliger Datensätze, wie z. B. Anzeigen, Bearbeiten und Löschen. Wenn es sich um eine Stapellöschung handelt, kann sie im oberen Schaltflächenbereich platziert werden. 2. Bearbeitung des AbfragebereichsDie allgemeine Schnittstellenwirkung des Abfragebereichs wird unten dargestellt. Zusätzlich zu einigen häufig verwendeten Abfragebedingungen werden auch einige allgemeine Verarbeitungsschaltflächen hinzugefügt, z. B. Abfragen, Zurücksetzen, Hinzufügen, Stapellöschen, Importieren, Exportieren usw.
Für den Abfragebereich handelt es sich ebenfalls um eine Formularverarbeitung. Sie müssen daher auch ein entsprechendes Objekt hinzufügen, um die Formulardaten zu übertragen. Fügen Sie ein searchForm-Modellobjekt und ein pageinfo-Objekt hinzu, um die Abfrage in den Daten zu paginieren, wie im folgenden Code gezeigt.
Standard exportieren {
Daten() {
zurückkehren {
Liste wird geladen: true,
Seiteninfo: {
Seitenindex: 1,
Seitengröße: 10,
gesamt: 0
},
Suchformular: {
Produktnummer: '',
Strichcode: '',
Produkttyp: '',
Produktname: '',
Status: 0
},Der Code der Ansichtsvorlage lautet wie folgt
<el-form ref="Suchformular" :model="Suchformular" label-width="80px">
<el-Zeile>
<el-col :span="6">
<el-form-item label="Produktnr." prop="ProduktNr">
<el-input v-model="Suchformular.ProduktNr" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="Produktname" prop="Produktname">
<el-input v-model="Suchformular.Produktname" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="Produkttyp" prop="Produkttyp">
<el-select v-model="searchForm.ProductType" filterbarer löschbarer Platzhalter="Bitte auswählen">
<el-Option
v-for="(Element, Schlüssel) in Typliste"
:Schlüssel="Schlüssel"
:label="Artikel.Wert"
:Wert="Artikel.Schlüssel"
/>
</el-Auswahl>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="Status" prop="Status">
<el-select v-model="searchForm.Status" filterbarer löschbarer Platzhalter="Bitte auswählen">
<el-Option
v-for="Artikel im Status"
:Schlüssel="Artikel.Wert"
:label="Artikel.Text"
:Wert="Artikel.Wert"
/>
</el-Auswahl>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-row style="float:right;padding-bottom:10px">
<el-button icon="el-icon-search" type="primary" round @click="search()">Suchen</el-button>
<el-button icon="el-icon-refresh-left" type="warning" round plain @click="resetForm('searchForm')">Zurücksetzen</el-button>
<el-button icon="el-icon-document-add" type="success" round @click="showAdd()">Hinzufügen</el-button>
<el-button icon="el-icon-document-remove" type="danger" round @click="BatchDelete()">Stapellöschung</el-button>
<el-button icon="el-icon-upload2" type="danger" plain="" round @click="showImport()">Importieren</el-button>
</el-row>Der Produkttyp ist eine Dropdown-Liste. Wir holen uns ein Objekt im Datenbereich und durchlaufen es, um den Wörterbuchinhalt anzuzeigen. Wenn wir uns etwas Zeit nehmen, können wir diese Dropdown-Listen gemäß einem regulären Verarbeitungsmodus vereinheitlichen und eine Wörterbuchkomponente definieren, um sie zu implementieren. Weisen Sie einfach einen Prop-Wert des Wörterbuchtyps zu, um die Dropdown-Liste zu binden. Dies wird später ausführlich besprochen. In der Skriptverarbeitungslogik von Vue können wir Daten über die API im erstellten Deklarationszyklus abrufen, sie an das Modell binden und die Schnittstelle wird automatisch aktualisiert. Der Verarbeitungscode wird unten angezeigt.
erstellt() {
// Produkttyp für Bindungswörterbücher usw. abrufen GetProductType().then(data => {
wenn (Daten) {
Daten.fürJeden(Element => {
this.productTypes.set(Artikel-ID, Artikelname)
this.typeList.push({ Schlüssel: Artikel-ID, Wert: Artikelname })
})
}
});
// Listeninformationen abrufen this.getlist()
},
Methoden: {
Liste abrufen () {
// Konstruieren Sie reguläre Paging-Abfragebedingungen var param = {
Typ: dieser.Produkttyp === 'alle' ? '' : dieser.Produkttyp,
Seitenindex: diese.Seiteninfo.Seitenindex,
Seitengröße: this.pageinfo.pagesize
};
// Fügen Sie die SearchForm-Bedingungen zu param hinzu und senden Sie die Abfrage param.type = this.searchForm.ProductType // Konvertieren Sie in das entsprechende Attribut Object.assign(param, this.searchForm);
// Produktliste abrufen, an das Modell binden und die Anzahl der Seiten ändern this.listLoading = true
GetProductList(param).then(data => {
diese.produktliste = daten.liste
this.pageinfo.total = Daten.Gesamtzahl
this.listLoading = falsch
})
},Mit der Anweisung Object.assign(param, this.searchForm); werden die Eigenschaften des Originalobjekts mit den erhaltenen Abfragebedingungen überschrieben und so eine variable Zuweisung der Abfragebedingungen implementiert. Das Abrufen von Listendaten ist der Prozess, in dem die Anzeige von Tabellenlistendaten vorgestellt wird. Der Effekt der Tabellenschnittstelle ist wie folgt.
Definieren Sie zunächst eine Tabellenüberschrift, ähnlich dem Tag <table> in HTML, und geben Sie den Stil und einige allgemeine Operationsfunktionen an, wie im folgenden Code gezeigt.
<el-Tabelle
v-loading="Liste wird geladen"
:data="Produktliste"
Grenze
fit
Streifen
Aktuelle Zeile hervorheben
:header-cell-style="{Hintergrund:'#eef1f6',Farbe:'#606266'}"
@selection-change="AuswahlÄnderung"
@row-dblclick="rowDbklick"
>Informationen zu bestimmten Eigenschaften finden Sie in den Eigenschaften der Elementkomponente des Tabellensteuerelements. In der Tabellenspalte konzentrieren wir uns hauptsächlich auf deren Datenbindung. Definieren Sie als Nächstes eine Spalte mit Kontrollkästchenauswahlen für die Stapelverarbeitung, z. B. Stapellöschvorgänge. <el-table-column Typ="Auswahl" Breite="55"/> Der nächste Schritt besteht darin, den Inhalt entsprechend den zurückgegebenen JSON-Attributen nacheinander in Tabellenspalten umzuwandeln, wie unten gezeigt.
<el-table-column label="Produktnummer" width="80">
<template slot-scope="Umfang">
{{ scope.row.ProduktNr }}
</Vorlage>
</el-Tabellenspalte>Wenn wir Verarbeitungseffekte in der Anzeige hinzufügen müssen, können wir die Anzeigeeffekte normalerweise in der Vorlage ändern. Im Folgenden wird die Verarbeitung der Einheit beschrieben. Zur Hervorhebung wird eine Markierung hinzugefügt.
<el-table-column align="center" label="Einheit" width="80">
<template slot-scope="Umfang">
<el-tag type="" effect="plain"> {{ Umfang.row.Einheit }}</el-tag>
</Vorlage>
</el-Tabellenspalte>
Bei einigen Effekten, die eine Beurteilung und Verarbeitung erfordern, können wir den Inhalt beurteilen und ausgeben, wie im folgenden Status gezeigt.
<el-table-column label="status" width="80">
<template slot-scope="Umfang">
<el-tag v-if="scope.row.Status==0" type="" effect="dark">Normal</el-tag>
<el-tag v-else-if="scope.row.Status==1" type="success" effect="dark">Empfehlen</el-tag>
<el-tag v-else-if="scope.row.Status==2" type="danger" effect="dark">Deaktivieren</el-tag>
</Vorlage>
</el-Tabellenspalte>
Darüber hinaus können wir für einige gängige Datumsverarbeitungen Formatierer, Filter und andere Mittel verwenden, um den Inhalt zu maskieren und den Zeitteil am Ende zu entfernen. <el-table-column align="center" label="Erstellungsdatum" width="120" prop="Erstellungszeit" :formatter="Datumsformat" />
dataFormat ist eine Escape-Funktion und der Funktionscode lautet wie folgt.
Datumsformat(Zeile, Spalte, Zellenwert) {
Zellenwert zurückgeben? fecha.format(neues Datum(Zellenwert), 'yyyy-MM-dd'): ''
},Wenn Sie es verwenden, müssen Sie oben eine Klassenbibliothek einführen importiere * als Datum aus „element-ui/lib/utils/date“ Für Vorgänge, die ein Escape-Zeichen aus dem Wörterbuch erfordern, können wir zum Escape-Zeichen den Formatierer verwenden, z. B. durch Hinzufügen einer Funktion zum Parsen des entsprechenden Werts in chinesische Informationen.
Effekte können mit Formatter maskiert werden
Produkttypformat (Zeile, Spalte, Zellenwert) {
var Anzeige = this.productTypes.get(Zellenwert)
Anzeige zurückgeben || ''
},Sie können zur Bearbeitung auch den Filtermodus verwenden. Hier stellen wir die Vorgangsverarbeitung mit Filter vor. Fügen Sie zunächst den entsprechenden Vorgang in den HTML-Code der Schnittstelle ein, wie im folgenden Code gezeigt.
<el-table-column align="center" label="Produkttyp" width="120" prop="Produkttyp">
<template slot-scope="Umfang">
<el-tag type="danger"> {{ scope.row.ProductType | ProdukttypFilter }}</el-tag>
</Vorlage>
</el-Tabellenspalte>Filter ist eigentlich ein | Filtersymbol, gefolgt von einer Filterfunktion.
Standard exportieren {
Filter:
Produkttypfilter: Funktion(Wert) {
wenn (!Wert) return ''
var Anzeige = that.productTypes.get(Wert)
Anzeige zurückgeben || ''
}
},Es ist zu beachten, dass der Filter selbst nicht auf die Attributliste in den Daten verweisen kann, um sie zu maskieren. Falls erforderlich, muss der Verweis darauf in der Hook-Funktion von beforeCreate aufgezeichnet werden, wie im folgenden Code gezeigt.
Für Bedientasten müssen wir nur eine Zeile hinzufügen, um mehrere Tasten anzuzeigen. Wenn eine Berechtigungskontrolle erforderlich ist, können wir die bedienbaren Berechtigungen basierend auf dem Berechtigungssatz bestimmen.
<el-table-column label="Vorgang" width="140">
<Vorlage Umfang="Umfang">
<el-Zeile>
<el-tooltip effect="light" content="Ansicht" placement="top-start">
<el-button icon="el-icon-search" type="success" circle size="mini" @click="showView(scope.row.ID)" />
</el-tooltip>
<el-tooltip effect="light" content="Bearbeiten" placement="top-start">
<el-button icon="el-icon-edit" type="primary" circle size="mini" @click="showEdit(scope.row.ID)" />
</el-tooltip>
<el-tooltip effect="light" content="Löschen" placement="top-start">
<el-button icon="el-icon-delete" type="danger" circle size="mini" @click="showDelete(scope.row.ID)" />
</el-tooltip>
</el-row>
</Vorlage>
</el-Tabellenspalte>Hier führt showView/showEdit/ShowDelete hauptsächlich einige Verarbeitungsvorgänge vor der Popup-Ebene aus. Wir definieren mehrere Variablen im Datenelement, um zu bestimmen, welcher Vorgang angezeigt werden muss. isAdd: false, istEdit: false, isView: false, isImport: false, Beispielsweise müssen wir für Bearbeitungsvorgänge die API-Verarbeitungsklasse verwenden, um Backend-Daten abzurufen und sie dem Formularobjekt des Bearbeitungsfelds zur Anzeige zuzuweisen.
zeigeEdit(id) {
// Nachdem die Daten mithilfe der API-Klasse über den ID-Parameter abgerufen wurden, weisen Sie sie dem Objekt zur Anzeige zu var param = { id: id }
GetProductDetail(param).then(data => {
Objekt.zuweisen(this.editForm, Daten);
})
this.isEdit = true
},Zur Anzeigeverarbeitung können wir nicht nur auf die Schaltflächen der einzelnen Zeilen klicken, um die angegebenen Zeilendatensätze anzuzeigen, sondern auch auf die angegebene Zeile doppelklicken, um die entsprechende Schnittstelle zur Anzeige von Datensätzen aufzurufen.
rowDbclick(Zeile, Spalte) {
var id = Zeile.ID
diese.showView(id);
},Dies sind einige Verarbeitungsereignisse in der Tabellendefinition
<el-Tabelle
v-loading="Liste wird geladen"
:data="Produktliste"
Grenze
fit
Streifen
Aktuelle Zeile hervorheben
:header-cell-style="{Hintergrund:'#eef1f6',Farbe:'#606266'}"
@selection-change="AuswahlÄnderung"
@row-dblclick="rowDbklick"
>Der Eigenschaftswert :visible jedes Dialogfelds bestimmt, welches modale Dialogfeld angezeigt oder ausgeblendet wird.
Was den Löschvorgang betrifft, müssen wir ihn nur bestätigen, ihn dann zur Remote-Verarbeitung übermitteln, das normale Ergebnis zurückgeben und den Benutzer darüber informieren, dass der Löschvorgang erfolgreich war. Der Logikcode wird unten angezeigt.
zeigeLöschen(id) {
this.$confirm('Möchten Sie die ausgewählten Datensätze wirklich löschen?', 'Bedienungsaufforderung',
{
Typ: „Warnung“ // Erfolg, Fehler, Info, Warnung
// BestätigungsButtonText: 'OK',
// cancelButtonText: 'Abbrechen'
}
).then(() => {
// Löschvorgang-Verarbeitungscode this.$message({
Typ: "Erfolg",
Nachricht: „Erfolgreich gelöscht!“
});
}).catch(() => {
diese.$nachricht({
Typ: "Info",
Nachricht: ‚Gelöscht‘
});
});
},Oben sind einige allgemeine Vorgänge für die Abfrage von regulären Tabellenlistenseiten, die Listenanzeige, das Escapen von Feldern und einige allgemeine Verarbeitungen für Hinzufügungs-, Bearbeitungs-, Anzeige- und Löschvorgänge aufgeführt. Durch den Betrieb dieser Modelle können wir die mühsamen Vorgänge zum erneuten Abrufen des entsprechenden DOM in der Vergangenheit reduzieren und den Betrieb und die Verarbeitung von Daten wesentlich komfortabler gestalten. Oben finden Sie den detaillierten Inhalt der Tabellenlistenanzeige der Front-End-Anwendungsentwicklung von Vue Element. Weitere Informationen zu Vue Element finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! Das könnte Sie auch interessieren:
|
<<: Lösungen zum Erstellen von Ping und NFS in einer eingebetteten Linux-Entwicklungsumgebung
>>: Einfache Verwendung von temporären MySQL-Tabellen
Artikel empfehlen
Beispiele für JavaScript-Entschüttelungen und Drosselung
Inhaltsverzeichnis Stabilisierung Drosselung: Ant...
Detaillierte Erläuterung mehrerer Methoden zur Reduzierung der JS-Array-Dimensionalität
Dimensionsreduzierung eines zweidimensionalen Arr...
Detaillierte Erklärung asynchroner Generatoren und asynchroner Iterationen in Node.js
Vorwort Generatorfunktionen gibt es in JavaScript...
Verschiedene Probleme und Lösungen beim Bereitstellen von Tomcat zur Veröffentlichung von Projekten unter Linux
Bereitstellen des Projekts in der Testumgebung de...
Beispiel für das Hoch- und Herunterladen von Dateien im Front-End mit Vue+Express
Erstellen Sie eine neue server.js Garn init -y Ga...
Details zur Verwendung von JS-Array-Methoden some, every und find
Inhaltsverzeichnis 1. einige 2. jedes 3. finden 1...
Implementieren Sie Group By basierend auf MySQL, um die neuesten Daten jeder Gruppe zu erhalten
Vorwort: Die Funktion „Gruppieren nach“ ruft das ...
Drei Möglichkeiten zur Kommunikation zwischen React-Komponenten (einfach und benutzerfreundlich)
Inhaltsverzeichnis 1. Kommunikation zwischen Elte...
Grundlegende Struktur von HTML-Dokumenten (Grundkenntnisse zur Erstellung von Webseiten)
HTML-Funktionsprinzip: 1. Lokaler Vorgang: Öffnen...
Webdesign-Erfahrung: Das Navigationssystem schlank machen
<br />Bei Diskussionen mit meinen Freunden h...
Farbverlauf für HTML-Hintergrund durch CSS erreicht
Screenshots der Effekte: Implementierungscode: Cod...
Lösung für den Fehler bei der Verbindung mit MySQL in Docker
Szenario: Nach der Installation der neuesten Vers...
Detaillierte Erläuterung von MySQL-Abfragebeispielen für mehrere Tabellen [Linkabfrage, Unterabfrage usw.]
Dieser Artikel beschreibt MySQL-Mehrtabellenabfra...
Tutorial zur Installation und Konfiguration von MySQL 5.7.17 Zip. Lösung für MySQL-Startfehler.
MySQL 5.7.17, scheint jetzt die neueste Version z...
Vue3 implementiert CSS unendlichen nahtlosen Scrolleffekt
In diesem Artikelbeispiel wird der spezifische Co...