ElementUI コンポーネント el-dropdown (落とし穴)

ElementUI コンポーネント el-dropdown (落とし穴)

選択して変更: クリックすると現在の値が表示され、ページ UI が表示され、CSS スタイルが変更されます。

重要なポイント: v-if と v-else-if は一緒に使用され、どちらも欠落することはできません。

効果画像:

ここに画像の説明を挿入

正しいコードは次のとおりです。

重要提示:
これまで使用していたのはv-if v-else-if判断のみだったので、 bug:即クリックできるのは 1 回だけ (その後無効になり)、再度クリックすることはできませんでした。
しかし、私が欲しい機能は、以前の選択状態を変更できるようにすることです。
そのため、以下のようなコード最適化(論理最適化)が行われます。

<div class="it-after" v-if=" resume.phone != ''">
	<p class="it-telphone clamp1">{{resume.phone}}</p>
	<div class="btn3"><el-button type="primary" icon="el-icon-warning" plain @click="open3">この履歴書を報告する</el-button></div>
	<div class="btn3" style="margin-top:5px;">
		<el-dropdown @command="resumeStateFun">
			<el-button type="primary" v-if="resume.status==0">
				<span :id="'span_'+resume.resumeCode">ラベルなし</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">面接済み</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">面接を待っています</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">不適切</span><i class="el-icon-arrow-down el-icon--right"></i>
			</el-button>
			<el-dropdown-menu slot="ドロップダウン">
				<el-dropdown-item :command="resume.resumeCode+'_0'">ラベルなし</el-dropdown-item>
				<el-dropdown-item :command="resume.resumeCode+'_1'">面接済み</el-dropdown-item>
				<el-dropdown-item :command="resume.resumeCode+'_2'">面接を待っています</el-dropdown-item>	
				<el-dropdown-item :command="resume.resumeCode+'_3'">不適切</el-dropdown-item>													
			</el-dropdown-menu>
		</el-dropdown>
	</div>
</div>

要約:

表示効果を正常にするには、 v-ifv-else-ifを一緒に使用する必要があります(完全な判断ロジック)。

これで、elementUI コンポーネント el-dropdown (落とし穴) に関するこの記事は終了です。element el-dropdown に関するその他の関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • ElementUI の el-dropdown に複数のパラメータを実装する方法
  • vue+elementは背景のel-dropdownドロップダウン機能の小さな要約を構築します

<<:  MySQL 8.0はJSONを扱えるようになりました

>>:  IE6 で PNG-24 形式の画像を正常に表示させる 2 つの方法

推薦する

Mac VMware Fusion CentOS7 静的 IP 構成チュートリアル図

目次CentOS7をインストールする静的IPの設定viを使用してファイルを編集するCentOS7をイ...

MySQLクエリキャッシュに関するヒント

目次序文QueryCache の概要クエリキャッシュ構成QueryCache の使用queryCac...

MySQLのビューの詳細な説明

ビュー: MySQL のビューはテーブルと多くの類似点があります。ビューも複数のフィールドと複数のレ...

div の高さをブラウザの高さに合わせて調整する方法

この古くからある疑問は、数え切れないほどのフロントエンド開発者やバックエンドプログラマーを悩ませてき...

HTML でフレームセット タグを使用するチュートリアル

フレームセット ページは通常の Web ページとは多少異なります。依然として <HTML>...

Vueはメニューナビゲーションを実装するためにelement-uiを使用します

この記事では、Element-uiを使用してメニューナビゲーションを実装するVueの具体的なコードを...

MySQL 5.6 の「暗黙的な変換」によりインデックスが失敗し、データが不正確になる

背景SQL クエリを実行するときに、where 条件の vachar 型フィールドの単一引用符を削除...

ウェブデザインを改善するための 8 つの CSS ツールを共有する

ウェブサイトのデザインを編集または変更する必要がある場合、CSS が重要な役割を果たします。 CSS...

src 属性と href 属性の違い

src と href には違いがあり、混同される可能性があります。 src は現在の要素を置き換える...

HTMLテキストの一般的なイベントとメソッドの詳細な説明

イベントの説明onactivate: オブジェクトがアクティブ要素として設定されたときに発生します。...

Vue画像拡大鏡コンポーネントのカプセル化と使用方法の詳細な説明

Vue画像拡大鏡コンポーネントパッケージに基づいて、参考までに具体的な内容は次のとおりです。画像拡大...

div+cssとウェブ標準ページの利点

div 要素は、HTML ドキュメント内のブロックレベル コンテンツの構造と背景を提供するために使用...

Linux でファイルの種類を理解して識別する方法

序文ご存知のとおり、Linux ではハードディスクやグラフィック カードなどすべてがファイルです。 ...

JS オブジェクト コンストラクター Object.freeze

目次概要例1) オブジェクトをフリーズする2) 配列をフリーズする3) 浅い凍結4) ディープフリー...

Docker環境でJenkinsを設定すると、タスクをビルドするときにコンソールログに文字化けした中国語の文字が表示されます

目次1. 問題の説明: 2. Jenkins設定のトラブルシューティング3. コードログのエンコード...