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-ifとv-else-ifを一緒に使用する必要があります（完全な判断ロジック）。

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

以下もご興味があるかもしれません: