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
Detaillierte Erläuterung der grundlegenden Befehle der Firewalld-Firewall in Centos7
1. Grundlagen der Linux-Firewall Das Linux-Firewa...
Vue-Statusverwaltung: Verwendung von Pinia statt Vuex
Inhaltsverzeichnis 1. Was ist Pinia? 2. Pinia ist...
So verwenden Sie die ElementUI-Paginierungskomponente Paginierung in Vue
Die Verwendung der ElementUI-Paging-Komponente Pa...
Teilen Sie die Fallstricke von MySQLs current_timestamp und ihre Lösungen
Inhaltsverzeichnis MySQLs current_timestamp-Falle...
Hinweise zu Fallstricken bei Vuex und Pinia in Vue3
Inhaltsverzeichnis einführen Installation und Ver...
So verwenden Sie die Baidu Map API im Vue-Projekt
Inhaltsverzeichnis 1. Registrieren Sie ein Konto ...
Unterschiede und Vergleiche von Speicher-Engines in MySQL
MyISAM-Speicher-Engine MyISAM basiert auf der ISA...
So konfigurieren Sie MySQL auf einem Ubuntu 16.04-Server und aktivieren die Remote-Verbindung
Hintergrund Ich lerne vor Kurzem nodejs und mir f...
Detaillierte Erläuterung der MySQL-Cursor-Konzepte und -Verwendung
Dieser Artikel erläutert anhand von Beispielen da...
Ändern Sie die maximale Anzahl von MySQL-Verbindungen und Konfigurationsdateien in Docker
1. Suchen Sie das MySQL-Image Docker PS 2. Geben ...
So führen Sie in 1 Minute ein reibungsloses Upgrade und Rollback der Nginx-Version durch
Lassen Sie uns heute über eine Situation sprechen...
Layui implementiert den Bestätigungscode der Anmeldeschnittstelle
In diesem Artikelbeispiel wird der spezifische Co...
Einfaches Beispiel für die Leistungsoptimierung von MySQL-SQL-Anweisungen
Einfaches Beispiel für die Leistungsoptimierung v...
Detaillierte Erläuterung des JavaScript-Betriebsmechanismus und eine kurze Diskussion über Event Loop
Inhaltsverzeichnis 1. Warum ist JavaScript Single...
MySQL-Serie 9 MySQL-Abfrage-Cache und -Index
Inhaltsverzeichnis Tutorial-Reihe 1. MySQL-Archit...