ElementUI component el-dropdown (pitfall)

Select and change: click to display the current value, and the page UI will be displayed and the CSS style will change.

Key point: v-if and v-else-if are used together, neither of them can be missing.

Effect picture:

insert image description here

The correct code is as follows:

重要提示：
All I used before was v-if judgment, without v-else-if , so bug：即could only click once (and then it became invalid) and I couldn’t click again.
But the function I want is to be able to change the previous selection state.
Therefore, the following code optimization (logical optimization) is made.

<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">Report this resume</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">Unlabeled</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">Interviewed</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">Waiting for interview</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">Inappropriate</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'">Unlabeled</el-dropdown-item>
				<el-dropdown-item :command="resume.resumeCode+'_1'">Interviewed</el-dropdown-item>
				<el-dropdown-item :command="resume.resumeCode+'_2'">Waiting for interview</el-dropdown-item>	
				<el-dropdown-item :command="resume.resumeCode+'_3'">Not suitable</el-dropdown-item>													
			</el-dropdown-menu>
		</el-dropdown>
	</div>
</div>

Summarize:

You need to use v-if and v-else-if together (complete judgment logic) to make the display effect normal

This is the end of this article about the elementUI component el-dropdown (pitfall). For more related element el-dropdown content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

How to implement multiple parameters in el-dropdown in ElementUI
vue+element builds a small summary of the background el-dropdown drop-down function

<<: MySQL 8.0 can now handle JSON

>>: Linux super detailed gcc upgrade process

ElementUI component el-dropdown (pitfall)

Effect picture:

Summarize:

HTML+CSS to achieve cyberpunk style button

In-depth explanation of MySQL stored procedures (in, out, inout)

Analysis of Context application scenarios in React

Detailed tutorial on building a private Git server on Linux

Detailed explanation of web page loading progress bar (recommended)

4 ways to implement routing transition effects in Vue

Detailed explanation of the pitfalls of Apache domain name configuration

Vue achieves seamless carousel effect (marquee)

Problems and solutions encountered when using v-model to two-way bind the values of parent-child components in Vue

How are spaces represented in HTML (what do they mean)?

Recommend

Differences in the hr separator between browsers

MySQL configuration master-slave server (one master and multiple slaves)

Introduction to JavaScript array deduplication and flattening functions

Linux super detailed gcc upgrade process

The difference between Div and table in HTML (discussed in detail in all aspects)

mysql 5.6.23 winx64.zip installation detailed tutorial

vue_drf implements SMS verification code

MySQL knowledge points for the second-level computer exam mysql alter command

Analysis of common usage examples of MySQL process functions

IIS7 IIS8 reverse proxy rule writing, installation and configuration method

MySQL 5.7.21 winx64 installation and configuration method graphic tutorial

CSS tips for controlling animation playback and pause (very practical)

How to configure mysql5.6 to support IPV6 connection in Linux environment

How to use wangEditor in vue and how to get focus by echoing data

Implementation code of front-end HTML skin changing function