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
So erstellen Sie Ihren eigenen nativen JavaScript-Router
Inhaltsverzeichnis Vorwort Einführung JavaScript ...
Implementierung der CSS-Transformation des Seitenumblätter-Animationsdatensatzes
Szenario mit dem Problem des Seitenumblätterns B ...
Lösung für das MySQL IFNULL-Beurteilungsproblem
Problem: Die von mybatis zurückgegebenen Daten vo...
Informationen zur Installation des Python3.8-Images im Docker
Offizielle Docker Hub-Website 1. Suchen Sie nach ...
Detaillierte Erläuterung der MySQL sql_mode-Abfrage und -Einstellung
1. Führen Sie SQL aus, um anzuzeigen wählen Sie @...
Detaillierte Erläuterung verschiedener Speichermethoden von Docker-Containern
Inhaltsverzeichnis Vorne geschrieben Mehrere Spei...
Lösen Sie das Problem, dass die mit nginx erhaltene IP-Adresse 127.0.0.1 ist
Holen Sie sich das IP-Tool importiere lombok.exte...
HTML-, CSS- und JS-Kompatibilitätsbaum (IE, Firefox, Chrome)
Was ist ein Baum im Webdesign? Einfach ausgedrückt...
Installationstutorial für MySQL 5.7 unter CentOS 7
1. Laden Sie das offizielle MySQL Yum Repository ...
Leitfaden zum Schreiben von HTML-Code
Gängige Konventions-Tags Selbstschließende Tags, ...
Detaillierte Verwendung des Linux-Textsuchbefehls find
Der Befehl „Find“ wird hauptsächlich zum Suchen v...
Fallstudie zu JavaScript-Funktionsaufrufen, Apply- und Bind-Methoden
Zusammenfassen 1. Ähnlichkeiten Beide können den ...
Details zur Ereignisbindung reagieren
Inhaltsverzeichnis Ereignisbindung von Klassenkom...
Eine Sammlung gängiger Verwendungen von HTML-Meta-Tags
Was ist ein Mata-Tag? Das <meta>-Element li...
Detaillierte Beschreibung der Funktion von new in JS
Inhaltsverzeichnis 1. Beispiel 2. Erstelle 100 So...