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
VUE+Canvas implementiert den Beispielcode des Desktop-Flipper-Brick-Breaking-Spiels
Jeder hat schon Flipper und Ziegelsteinzertrümmer...
Detailliertes Tutorial zur Installation des Apache-Quellcodes und zur Konfiguration des virtuellen Hosts
Installieren Sie Apache aus der Quelle 1. Laden S...
JavaScript Dom implementiert das Prinzip und Beispiel eines Karussells
Wenn wir ein Karussell bauen wollen, müssen wir z...
Beispiel für die Implementierung eines Master-Slave-Hot-Standby mit Docker+keepalived+nginx
Vorwort Um den Single Point of Failure zu beheben...
Vue implementiert eine kleine Countdown-Funktion
In vielen Projekten muss eine Countdown-Funktion ...
Ein praktischer Bericht über XSS-Angriffe in einem VUE-Projekt
Inhaltsverzeichnis Vorwort Entdecken Sie die Ursa...
Vue realisiert kaskadierende Auswahl von Provinzen, Städten und Bezirken
Vor Kurzem musste ich einen kaskadierenden Auswah...
Implementierung von dynamischem REM für mobiles Layout
Dynamische REM 1. Lassen Sie uns zunächst die akt...
Natives JavaScript zum Erreichen von Skinning
Der spezifische Code zur Implementierung von Skin...
Detaillierte Erläuterung der Datenbindung von Vue-Formularereignissen
<Text> <div id="Wurzel"> &l...
vue + tp5 realisiert eine einfache Anmeldefunktion
In diesem Artikelbeispiel wird der spezifische Co...
Warum wird mir die Zugriffsschnittstelle für Docker Tomcat nicht angezeigt?
Frage: Kann der Ursprungsserver keine Darstellung...
JavaScript-Code zur Implementierung der Weibo-Batch-Unfollow-Funktion
Ein cooler JavaScript-Code, um Weibo-Benutzern st...
Der Button hat einen hässlichen grauen Rand. Wie kann ich ihn entfernen?
Ich habe den Dialog beim Schließen verwendet und e...
Linux entfernt node.js vollständig und installiert es über den Befehl yum neu
erster Schritt Einmaliges Löschen mit der integri...