elementUI組件el-dropdown(踩坑)

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

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

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

重點：v-if 和 v-else-if 的搭配使用，缺一不可。

效果圖：

在這里插入圖片描述

正確的代碼如下：

重要提示：
我之前使用的全部是v-if判斷，沒有搭配v-else-if，所以就出現(xiàn)了bug：即只能點擊一次，（然后就失效了）就不能繼續(xù)點擊了。
但是我想要的功能：是能改變之前的選擇狀態(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">舉報該簡歷</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="dropdown">
				<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內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

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