ElementUI component el-dropdown (pitfall)

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

Recommend

How to find identical files in Linux

As the computer is used, a lot of garbage will be...

How to implement concurrency control in JavaScript

Table of contents 1. Introduction to Concurrency ...

WeChat applet implements simple calculator function

This article shares the specific code for the WeC...

Detailed steps to deploy SpringBoot projects using Docker in Idea

Preface Project requirements: Install the Docker ...

JavaScript implements product details of e-commerce platform

This article shares a common example of viewing p...

mysql5.7.14 decompressed version installation graphic tutorial

MySQL is divided into Community Edition (Communit...

MySQL 8.0.15 winx64 compression package installation and configuration method graphic tutorial

This article shares the installation and configur...

Detailed explanation of JavaScript to monitor route changes

Table of contents history pushState() Method push...

Detailed explanation of JavaScript progress management

Table of contents Preface question principle test...

Implementing a simple web clock with JavaScript

Use JavaScript to implement a web page clock. The...

MySQL 5.7.27 winx64 installation and configuration method graphic tutorial

This article shares the installation and configur...

Solution to the problem of not being able to access the Internet when installing centos7 with VmWare

What to do if VmWare cannot access the Internet w...

MySQL 8.0.3 RC is about to be released. Let’s take a look at the changes

MySQL 8.0.3 is about to be released. Let’s take a...

How to implement animation transition effect on the front end

Table of contents Introduction Traditional transi...

A brief discussion on the semantics of HTML and some simple optimizations

1. What is semanticization? Explanation of Bing D...