elementUI組件el-dropdown(踩坑)

更新時(shí)間：2021年12月13日 16:28:40 作者：草巾冒小子

本文主要介紹了elementUI組件el-dropdown的一些坑，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

選擇即改變：click選擇哪個(gè)，就顯示當(dāng)前的值，頁面UI顯示并伴隨css樣式的變化。

重點(diǎn)：v-if 和 v-else-if 的搭配使用，缺一不可。

效果圖：

在這里插入圖片描述

正確的代碼如下：

重要提示：
我之前使用的全部是v-if判斷，沒有搭配v-else-if，所以就出現(xiàn)了bug：即只能點(diǎn)擊一次，（然后就失效了）就不能繼續(xù)點(diǎn)擊了。
但是我想要的功能：是能改變之前的選擇狀態(tài)。
所以，才有了下面的代碼優(yōu)化（邏輯上的優(yōu)化）。

<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">舉報(bào)該簡歷</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">未標(biāo)記</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="dropdown">
				<el-dropdown-item :command="resume.resumeCode+'_0'">未標(biāo)記</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>

總結(jié)：

需要 v-if 和 v-else-if 搭配使用，（完整的判斷邏輯）操作起來，才能讓顯示效果正常

到此這篇關(guān)于elementUI組件el-dropdown(踩坑)的文章就介紹到這了,更多相關(guān)element el-dropdown內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue路由組件的緩存keep-alive和include屬性的具體使用
：瀏覽器頁面在進(jìn)行切換時(shí),原有的路由組件會(huì)被銷毀,通過緩存可以保存被切換的路由組件,本文主要介紹了Vue路由組件的緩存keep-alive和include屬性的具體使用,感興趣的可以了解一下
2023-11-11
Vue中@click.stop和@click.prevent實(shí)例詳解
當(dāng)我們使用Vue.js開發(fā)前端應(yīng)用時(shí),經(jīng)常會(huì)在模版中使用@click指令來響應(yīng)用戶的點(diǎn)擊事件,這篇文章主要給大家介紹了關(guān)于Vue中@click.stop和@click.prevent的相關(guān)資料,需要的朋友可以參考下
2024-04-04
淺談vue方法內(nèi)的方法使用this的問題
今天小編就為大家分享一篇淺談vue方法內(nèi)的方法使用this的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
在vue中如何引入外部less文件
這篇文章主要介紹了在vue中如何引入外部less文件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue學(xué)習(xí)筆記進(jìn)階篇之過渡狀態(tài)詳解
本篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之過渡狀態(tài)詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07
vue-cli3打包時(shí)圖片壓縮處理方式
這篇文章主要介紹了vue-cli3打包時(shí)圖片壓縮處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
vue項(xiàng)目開發(fā)環(huán)境工具node搭建過程
最近在開始接觸做vue框架的前端項(xiàng)目,以前用的前端比如html,js,css等都是比較原生的,寫好后直接瀏覽器打開就行,今天就先記錄一下vue的開發(fā)運(yùn)行搭建過程,感興趣的朋友一起看看吧
2023-09-09
詳解vue-router基本使用
本篇文章主要介紹了詳解vue-router基本使用，詳細(xì)的介紹了vue-router的概念和用法，有興趣的可以了解一下。
2017-04-04
vue如何使用element-ui 實(shí)現(xiàn)自定義分頁
這篇文章主要介紹了vue如何使用element-ui 實(shí)現(xiàn)自定義分頁,可以通過插槽實(shí)現(xiàn)自定義的分頁,本文通過實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
2024-07-07
Vue3的路由傳參方法超全匯總
vue路由傳參的使用場景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí),攜帶參數(shù)跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue3路由傳參方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-04-04