ElementUI-Komponente el-dropdown (Falle)

ElementUI-Komponente el-dropdown (Falle)

Auswählen und ändern: Klicken Sie, um den aktuellen Wert anzuzeigen. Daraufhin wird die Benutzeroberfläche der Seite angezeigt und der CSS-Stil geändert.

Wichtiger Punkt: v-if und v-else-if werden zusammen verwendet, keines von beiden darf fehlen.

Effektbild:

Bildbeschreibung hier einfügen

Der richtige Code lautet wie folgt:

重要提示:
Alles, was ich vorher verwendet habe, war v-if -Urteil ohne v-else-if , daher bug:即konnte nur einmal klicken (und dann wurde es ungültig) und ich konnte nicht noch einmal klicken.
Die gewünschte Funktion besteht jedoch darin, den vorherigen Auswahlstatus ändern zu können.
Daher wird folgende Code-Optimierung (logische Optimierung) vorgenommen.

<div Klasse="it-after" v-if=" Lebenslauf.Telefon != ''">
	<p class="it-telphone clamp1">{{resume.phone}}</p>
	<div class="btn3"><el-button type="primary" icon="el-icon-warning" plain @click="open3">Diesen Lebenslauf melden</el-button></div>
	<div Klasse="btn3" Stil="margin-top:5px;">
		<el-dropdown @command="resumeStateFun">
			<el-button type="primary" v-if="resume.status==0">
				<span :id="'span_'+resume.resumeCode">Unbeschriftet</span><i class="el-icon-arrow-down el-icon--right"></i>
			</el-button>
			<el-button type="primary" v-else-if="resume.status==1">
				<span :id="'span_'+resume.resumeCode">Vorstellungsgespräch</span><i class="el-icon-arrow-down el-icon--right"></i>
			</el-button>
			<el-button type="primary" v-else-if="resume.status==2">
				<span :id="'span_'+resume.resumeCode">Warte auf Vorstellungsgespräch</span><i class="el-icon-arrow-down el-icon--right"></i>
			</el-button>
			<el-button type="primary" v-else-if="resume.status==3">
				<span :id="'span_'+resume.resumeCode">Unangemessen</span><i class="el-icon-arrow-down el-icon--right"></i>
			</el-button>
			<el-dropdown-menu slot="Dropdown">
				<el-dropdown-item :command="resume.resumeCode+'_0'">Unbeschriftet</el-dropdown-item>
				<el-dropdown-item :command="resume.resumeCode+'_1'">Vorstellungsgespräch</el-dropdown-item>
				<el-dropdown-item :command="resume.resumeCode+'_2'">Warte auf Vorstellungsgespräch</el-dropdown-item>	
				<el-dropdown-item :command="resume.resumeCode+'_3'">Nicht geeignet</el-dropdown-item>													
			</el-Dropdown-Menü>
		</el-dropdown>
	</div>
</div>

Zusammenfassen:

Sie müssen v-if und v-else-if zusammen verwenden (vollständige Beurteilungslogik), um den Anzeigeeffekt normal zu machen

Dies ist das Ende dieses Artikels über die ElementUI-Komponente el-dropdown (Falle). Weitere verwandte Inhalte zum Element el-dropdown finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • So implementieren Sie mehrere Parameter in el-dropdown in ElementUI
  • vue+element erstellt eine kleine Zusammenfassung der Hintergrund-Dropdown-Funktion el-dropdown

<<:  MySQL 8.0 kann jetzt JSON verarbeiten

>>:  Zwei Möglichkeiten, damit IE6 Bilder im PNG-24-Format normal anzeigt

Artikel empfehlen

Detaillierte Erklärung zur sauberen Deinstallation von Docker

Zunächst die Informationen zur Serverumgebung: Gr...

Grundlegender Installationsprozess von mysql5.7.19 unter winx64 (Details)

1. Herunterladen https://dev.mysql.com/downloads/...

Drei Möglichkeiten zum Zeichnen einer Herzform mit CSS

Im Folgenden stellen wir drei Möglichkeiten zum Z...

Axios storniert wiederholte Anfragen

Inhaltsverzeichnis Vorwort 1. So stornieren Sie e...

Erläuterung des Vue.js $refs-Anwendungsfalls

Trotz Props und Events müssen Sie manchmal immer ...

Analyse der problematischen „Aborted“-Warnung in MySQL anhand von Fallstudien

Dieser Artikel stellt hauptsächlich den relevante...

MySQL Series 6-Benutzer und Autorisierung

Inhaltsverzeichnis Tutorial-Reihe 1. Benutzerverw...

Zusammenfassung häufig verwendeter Befehle für Linux-Dateioperationen

0. Neuer Betrieb: mkdir abc #Erstelle einen neuen...

HTML Einführungstutorial HTML Tag Symbole schnell beherrschen

Randbemerkung <br />Wenn Sie nichts über HTM...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.17

In diesem Artikel wird die Installations- und Kon...

Analyse von Multithread-Programmierbeispielen unter Linux

1 Einleitung Die Thread-Technologie wurde bereits...

Implementierung der MySQL-Benutzerrechteverwaltung

1. Einführung in MySQL-Berechtigungen Es gibt 4 T...

Die Organisation W3C gibt Stilempfehlungen für HTML4

Dies ist die Stilempfehlung der W3C-Organisation f...