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

Some tips on using the HTML title attribute correctly

ElementUI component el-dropdown (pitfall)

Effect picture:

Summarize:

Some tips on using the HTML title attribute correctly

Detailed explanation of various HTTP return status codes

Detailed explanation of Vue filters

Solution to Chinese garbled characters when operating MySQL database in CMD

Solution to the problem that Java cannot connect to MySQL 8.0

Detailed explanation of the properties and functions of Vuex

Use of Vue3 table component

Detailed steps to install JDK and Tomcat in Linux environment

What is ssh? How to use? What are the misunderstandings?

Detailed explanation of MySQL startup options and system variables examples

Recommend

CentOS 6 uses Docker to deploy redis master-slave database operation example

How to use JS to implement waterfall layout of web pages

How to view the storage location of MySQL data files

Installation of Ubuntu 18.04 reports: failed to load ldlinux.c32 and its solution steps

How to solve the problem of insufficient permissions when switching users in docker container

Detailed explanation of Vuex overall case

WeChat applet custom scroll-view example code

JS object copying (deep copy and shallow copy)

Docker private repository management and deletion of images in local repositories

Vue implements the operation code of clicking a button to download a file (backend Java)

Differences between ES6 inheritance and ES5 inheritance in js

Example of deploying MySQL on Docker

Screen command and usage in Linux

VSCode Development UNI-APP Configuration Tutorial and Plugin

Chrome 4.0 supports GreaseMonkey scripts