element Dropdown組件意想不到的坑
去年做的兩個(gè)web項(xiàng)目，都用到了elementUI，自認(rèn)為已經(jīng)比較熟悉了，尤其是其中一些常用的組件，比如說今天的主角——Dropdown。
所以，今年項(xiàng)目中，如果再用到的話，應(yīng)該不會(huì)踩坑了。畢竟，對(duì)它的坑，已經(jīng)比較了解了。它常見的坑主要有以下兩個(gè)：
1、el-dropdown下拉el-dropdown-item添加點(diǎn)擊事件click沒有反應(yīng)
踩坑寫法：
<el-dropdown-item @click="remoToken">退出</el-dropdown-item>
避坑寫法：
<el-dropdown-item @click.native="remoToken">退出</el-dropdown-item>
2、el-table組件中使用Dropdown，無法顯示下拉框
踩坑寫法：
<el-table-column> ? <el-dropdown><el-dropdown> <el-table-column>
避坑寫法
<el-table-column> ? <template slot-scope="scope"> ? ? <el-dropdown><el-dropdown> ? ? </template> <el-table-column>
但是，昨天，在使用Dropdown組件時(shí)，還是踩了一個(gè)意想不到的坑！
事情是這樣的。
也是在el-table組件中使用Dropdown，已經(jīng)采用了避坑寫法，大概寫法如下：
<el-table-column>
? <template slot-scope="scope">
? ? <el-dropdown v-if="status === 1">
? ? ?<a>{{activeSelect}}<i class="el-icon-arrow-down el-icon--right"></a>
? ? ?<el-dropdown-menu slot="dropdown">
? ? ? ?<el-dropdown-item command="a">進(jìn)入面試</el-dropdown-item>?
? ? ? ?<el-dropdown-item command="b">入職</el-dropdown-item>
? ? ?</el-dropdown-menu>
? ? <el-dropdown> ?
? ? <el-dropdown v-if="status === 2">
? ? ?<a>{{activeSelect}}<i class="el-icon-arrow-down el-icon--right"></a>
? ? ?<el-dropdown-menu slot="dropdown">
? ? ? ?<el-dropdown-item command="b">入職</el-dropdown-item>
? ? ?</el-dropdown-menu>
? ? <el-dropdown>?
? </template>
<el-table-column>可是，不管怎么點(diǎn)擊，Dropdown下拉框就是不顯示。
問題到底出現(xiàn)在哪？百思百搜不得其解！
后來沒辦法，就把自己的代碼注釋掉，換上了一組官方文檔中的示例代碼。突然，下拉框出來了！這是為什么？
仔細(xì)對(duì)比了一下，代碼沒什么區(qū)別，除了原來的代碼有兩組Dropdown，現(xiàn)在的只有一組Dropdown，難道問題出現(xiàn)在這里。
這時(shí)，腦袋中突然浮現(xiàn)出一句話：v-if 、v-else-if 和v-else 最好搭配使用，形成完整的邏輯判斷。
果斷把代碼改成如下：
<el-table-column> ? <template slot-scope="scope"> ? ? <el-dropdown v-if="status === 1"> ? ? <el-dropdown> ? ? ? <el-dropdown v-else-if="status === 2"> ? ? <el-dropdown>? ? </template> <el-table-column>
一試，下拉框正常出來了！
問題還真出現(xiàn)在這，以前也經(jīng)常多個(gè)v-if 一起用，也沒問題，為什么到這個(gè)場(chǎng)景中就不行（求大神指教）。
到此這篇關(guān)于element Dropdown組件意想不到的坑的文章就介紹到這了,更多相關(guān)element Dropdown 坑內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用vue-router在Vue頁面之間傳遞數(shù)據(jù)的方法
這篇文章主要介紹了使用vue-router在Vue頁面之間傳遞數(shù)據(jù)的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
vue移動(dòng)端項(xiàng)目渲染pdf步驟及問題小結(jié)
這篇文章主要介紹了vue移動(dòng)端項(xiàng)目渲染pdf步驟,vue-pdf的插件在使用的過程中是連連踩坑的，基本遇到3個(gè)問題，分別在文中給大家詳細(xì)介紹，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Element-UI+Vue模式使用總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
在Vue中使用this.$store或者是$route一直報(bào)錯(cuò)的解決
今天小編就為大家分享一篇在Vue中使用this.$store或者是$route一直報(bào)錯(cuò)的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue子組件實(shí)時(shí)獲取父組件的數(shù)據(jù)實(shí)現(xiàn)
本文主要介紹了vue子組件實(shí)時(shí)獲取父組件的數(shù)據(jù)實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
vue實(shí)現(xiàn)echart餅圖legend顯示百分比的方法
本文主要介紹了vue實(shí)現(xiàn)echart餅圖legend顯示百分比的方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
組件間通信簡(jiǎn)單來說就是組件間進(jìn)行數(shù)據(jù)傳遞。就像我們?nèi)粘５拇螂娫?，就是通訊的一種方式，你把話說給我聽，我把話說給你聽，說的話就是數(shù)據(jù)。電話就是通訊方式的一種。無論是 Vue 還是 React ，都得進(jìn)行組件間通信。2021-05-05
Vue3?封裝?Element?Plus?Menu?無限級(jí)菜單組件功能的詳細(xì)代碼
本文分別使用?SFC（模板方式）和?tsx?方式對(duì)?Element?Plus?*el-menu*?組件進(jìn)行二次封裝，實(shí)現(xiàn)配置化的菜單，有了配置化的菜單，后續(xù)便可以根據(jù)路由動(dòng)態(tài)渲染菜單，對(duì)Vue3?無限級(jí)菜單組件相關(guān)知識(shí)感興趣的朋友一起看看吧2022-09-09
vue項(xiàng)目實(shí)例中用query傳參如何實(shí)現(xiàn)跳轉(zhuǎn)效果
這篇文章主要介紹了vue項(xiàng)目實(shí)例中用query傳參如何實(shí)現(xiàn)跳轉(zhuǎn)效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue router帶參數(shù)頁面刷新或回退參數(shù)消失的解決方法
這篇文章主要介紹了vue router帶參數(shù)頁面刷新或回退參數(shù)消失的解決方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02