Praxis der Implementierung einer benutzerdefinierten Suchleiste und des Löschens von Suchereignissen in Avue
|
Passen Sie die Suchleiste an und verwenden Sie eine Schaltfläche, um die Suchleiste auszublenden. Die Anpassungseffekte sind wie folgt: Vor dem Falten:
Nach dem Falten:
1. Passen Sie den Inhalt der Suchleiste anTatsächlich ist es auch ganz einfach. Legen Sie einfach die Attribute slot-scope="scope" und slot="search" für die Vorlage in der entsprechenden Vue-Datei \src\views\admin\sysxxfsjl.vue fest, um den Inhalt der Suchleiste anzupassen:
<template slot-scope="Umfang" slot="Suche">
<el-form ref="form" :model="searchForm" style="width: 830px;margin-left: -10px; display: inline-block;" label-width="100px">
<el-Zeile>
<el-form-item label="Betreff:">
<el-input v-model="searchForm.xxbt" style="width: 238px;margin-left: -100px" @change="getList()"></el-input>
</el-form-item>
<el-form-item label="Absender:">
<el-Kaskade
v-Modell="fsrid"
:Optionen="Optionen"
löschbar
Stil="Breite: 242px !wichtig;Rand links: -100px"
:props="{ expandTrigger: 'hover' }"
@change="getList()"></el-cascader>
</el-form-item>
</el-row>
<el-row v-show="mehrshow">
<el-form-item label="Sendezeit:">
<el-Datumsauswahl
Stil="Breite: 238px !wichtig; linker Rand: -100px"
v-model="Zeitfenster"
Typ="Datumsbereich"
ausrichten="rechts"
Verknüpfung von Bedienfeldern aufheben
format="jjjj-MM-tt HH:mm:ss"
Werteformat="jjjj-MM-tt HH:mm:ss"
Bereichstrennzeichen = "bis"
start-placeholder="Startdatum"
end-placeholder="Enddatum"
:picker-options="Picker-Optionen"
@change="getList()">
</el-Datumsauswahl>
</el-form-item>
<el-form-item label="Methode:" >
<el-radio-group v-model="searchForm.fsfs" size="small" style="margin-left: -100px" @change="getList()">
<el-radio-button label="4">Systemnachricht</el-radio-button>
<el-radio-button label="1">Mobile SMS</el-radio-button>
<el-radio-button label="3">Über WeChat senden</el-radio-button>
</el-radio-gruppe>
</el-form-item>
</el-row>
<el-row v-show="mehrshow">
<el-form-item label="Lesestatus:">
<el-radio-group v-model="sfyd" size="small" style="margin-left: -100px;width: 238px" @change="getList()">
<el-radio-button label="2">Alle</el-radio-button>
<el-radio-button label="1">Lesen</el-radio-button>
<el-radio-button label="0">Ungelesen</el-radio-button>
</el-radio-gruppe>
</el-form-item>
<el-form-item label="In Aufgabenliste übertragen:">
<el-radio-group v-model="checkList" style="margin-left: -100px" @change="getList()">
<el-radio-button label="1">Ja</el-radio-button>
<el-radio-button label="0">Nein</el-radio-button>
</el-radio-gruppe>
</el-form-item>
</el-row>
</el-form>
</Vorlage>
Der Suchbutton ruft die Methode in getList auf, um der Tabelle Daten zuzuweisen
getList(Seite, Parameter) {
diese.tableData = []
if (this.timeSlot && this.timeSlot.length == 2) {//Sendezeit this.searchForm.startTime = this.timeSlot[0].replace(/\+/g, ' ')
this.searchForm.endTime = this.timeSlot[1].replace(/\+/g, ' ')
}anders {
löschen Sie this.searchForm.startTime
lösche this.searchForm.endTime
}
if (this.fsrid.length){//Absender this.searchForm.fsrid = this.fsrid[this.fsrid.length-1]
}anders {
löschen Sie this.searchForm.fsrid
}
if (this.sfyd.length>0){//Ob zur Aufgabenliste übertragen werden soll if (this.sfyd== 1){
this.searchForm.sfyd = 1
}sonst wenn (this.sfyd == 0){
this.searchForm.sfyd = 0
}anders {
lösche this.searchForm.sfyd
}
}anders {
lösche this.searchForm.sfyd
}
if (this.checkList!=''){//Ob zur Aufgabenliste übertragen werden soll if (this.checkList== '1'){
this.searchForm.sfdb = 1
}anders {
this.searchForm.sfdb = 0
}
}anders {
löschen Sie this.searchForm.sfdb
}
wenn (!Seite) {
Seite = diese.Seite
}
this.tableLoading = wahr
fetchList(Objekt.zuweisen({
aktuell: Seite.aktuelleSeite,
Größe: Seite.Seitengröße
}, Parameter, dieses.Suchformular )).dann(Antwort => {
für(var i=0;i<response.data.data.records.length;i++){
Antwort.Daten.Daten.Datensätze[i].Checkbox=[]
wenn(response.data.data.records[i].sfyd==0){
response.data.data.records[i].checkbox.push('ungelesen')
}anders{
Antwort.Daten.Daten.Datensätze[i].Checkbox.Push('Lesen')
}
wenn(Antwort.Daten.Daten.Datensätze[i].sfdb==1){
response.data.data.records[i].checkbox.push('Zu erledigen')
}
wenn(response.data.data.records[i].sfsc==1){
response.data.data.records[i].checkbox.push('Sammlung')
}
wenn(response.data.data.records[i].sfhf==1){
response.data.data.records[i].checkbox.push('hat geantwortet')
}
wenn(response.data.data.records[i].xxfjmc){
Antwort.Daten.Daten.Datensätze[i].xxfjmc=Antwort.Daten.Datensätze[i].xxfjmc.split(',')
}anders{
Antwort.Daten.Daten.Datensätze[i].xxfjmc=[]
}
this.tableData.push(Antwort.Daten.Daten.Datensätze[i])
}
diese.Seite.Gesamt = Antwort.Daten.Daten.Gesamt
this.tableLoading = falsch
}).catch(() => {
this.tableLoading=false
})
},
2. Passen Sie die Suchschaltfläche anDurch das Setzen der Attribute slot-scope="scope" und slot="searchMenu" können Sie die Suchschaltfläche anpassen und weitere Schaltflächen hinzufügen:
<template slot-scope="Bereich" slot="Suchmenü">
<el-button v-if="moreshow" type="success" class="el-button--small" icon="el-icon-caret-top" @click="getmoreshow(1)">Ausblenden</el-button>
<el-button v-else class="el-button--small" icon="el-icon-caret-bottom" @click="getmoreshow(2)">Mehr</el-button>
</Vorlage>
Die Schaltflächen „Mehr“ und „Ausblenden“ rufen Methoden zum Anzeigen und Ausblenden von Suchelementen auf.
getmoreshow(Typ){
wenn(Typ==1){
this.moreshow=false
}anders{
dies.moreshow=true
}
},
Um die Schaltfläche zu löschen , fügen Sie das Ereignis „@search-reset“ zu avue-crud hinzu. Löschen Sie die Optionen und rufen Sie this.getList(this.page); auf.
//Suche löschen Button-Ereignis searchReset(){
dieses.Suchformular = {}
this.searchForm.sfyd = ''
if (this.searchForm.sfyd!=''){//Ob zur Aufgabenliste übertragen werden soll if (this.searchForm.sfyd== '1'){
this.searchForm.sfyd = 1
}anders {
this.searchForm.sfyd = 0
}
}anders {
lösche this.searchForm.sfyd
}
dies.fsrid = []
this.timeSlot = []
diese.checkList = ''
dies.sfyd = ''
dies.$refs.crud.toggleSelection();
dies.getList(diese.seite);
},
Dies ist das Ende dieses Artikels über die Implementierung einer benutzerdefinierten Suchleiste und das Löschen von Suchereignissen in Avue. Weitere verwandte Informationen zur benutzerdefinierten Suchleiste von Avue und zum Löschen von Suchinhalten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: MySQL fügt automatisch Millionen simulierter Datenoperationscodes ein
>>: So entfernen Sie den gepunkteten Rahmen beim Klicken auf einen Link in FireFox
Artikel empfehlen
Zwei Möglichkeiten zum Öffnen und Schließen des MySQL-Dienstes
Methode 1: Verwenden Sie den cmd-Befehl Öffnen Si...
IIS-Konfiguration des Win Server 2019-Servers und einfache Veröffentlichung der Website
1. Stellen Sie zunächst eine Remoteverbindung zum...
Docker-Protokolle - Zeigen Sie die Implementierung der Docker-Container-Protokolle an
Sie können die Containerprotokolle über den Befeh...
Detaillierte Erklärung zur Konfiguration der OpenGauss-Datenbank im Docker
Für Windows-Benutzer Verwenden von openGauss in D...
So verwenden Sie CSS, um mehrere Bilder horizontal in der Mitte anzuzeigen
Lassen Sie mich zunächst über die Implementierung...
Vue3+TypeScript kapselt Axios und implementiert Anforderungsaufrufe
Auf keinen Fall. Es stellt sich heraus, dass es L...
Vue implementiert Buchverwaltungsfall
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erklärung zum Erstellen einer Datentabelle in MySQL und zum Herstellen von Primär- und Fremdschlüsselbeziehungen
Vorwort Beim Anlegen der Primär- und Fremdschlüss...
Eine detaillierte Zusammenfassung der Regeln zur Verschachtelung von HTML-Tags, geeignet für Anfänger
Ich habe vor kurzem HTML neu gelernt, was als neue...
Überlegungen zur Kürzung von mehrzeiligem Text mit einer Schaltfläche „Mehr anzeigen“
Ich bin erst kürzlich zufällig auf diese kleine A...
So erstellen (CREATE PROCEDURE) und rufen (CALL) Sie eine gespeicherte MySQL-Prozedur auf und so erstellen (DECLARE) und weisen (SET) Sie eine Variable zu
Dieser Artikel beschreibt anhand von Beispielen, ...
So implementieren Sie eine geplante Sicherung der CentOS MySQL-Datenbank
Das folgende Skript wird für die geplante Sicheru...
Detailliertes Beispiel der Sortierfunktion field() in MySQL
Vorwort In unserem täglichen Entwicklungsprozess ...
Implementierungscode zum Betreiben einer MySQL-Datenbank in Golang
Vorwort Golang stellt das Datenbank-/SQL-Paket fü...
js zur Implementierung eines Web-Rechners
Wie erstelle ich mit HTML, CSS und JS einen einfa...