最近在項(xiàng)目中需要用到級(jí)聯(lián)這么個(gè)控件，所以便去element上找了個(gè)，發(fā)現(xiàn)了個(gè)問(wèn)題，在這里跟大家分享下，介于公司項(xiàng)目的隱私性，所以一些文字便給大家打上馬賽克了，敬請(qǐng)諒解~

不多說(shuō)廢話(huà)，直接上問(wèn)題：

ElemenUI的級(jí)聯(lián)是通過(guò)子級(jí)字段遞歸進(jìn)行顯示的，但是假如后端老鐵也用了遞歸寫(xiě)的數(shù)據(jù)，而遞歸到最后一個(gè)數(shù)據(jù)集便出現(xiàn)了問(wèn)題，會(huì)出現(xiàn)光有字段，但是卻沒(méi)有數(shù)據(jù)這么個(gè)情況在這里插入圖片描述

這時(shí)候就出現(xiàn)了問(wèn)題：

最后一級(jí)會(huì)多出來(lái)一個(gè)級(jí)聯(lián)，這種體驗(yàn)便造成了很不好的感覺(jué)。

解決辦法：

將獲取這些級(jí)聯(lián)的數(shù)據(jù)作為參數(shù)傳到這個(gè)遞歸函數(shù)當(dāng)中，進(jìn)行從組，假如遞歸到[ ] 轉(zhuǎn)換為undefined(‘不識(shí)別’)，這樣就解決了這個(gè)多一個(gè)空級(jí)聯(lián)的問(wèn)題

補(bǔ)充知識(shí)：**vue，element.ui組件很容易忽略的坑--------級(jí)聯(lián)選擇器中的小bug**

前一段時(shí)間在使用vue2x版本進(jìn)行電商后臺(tái)的重構(gòu)時(shí)發(fā)現(xiàn)的此版本的小bug，雖然不算什么大事，但對(duì)用戶(hù)體驗(yàn)和頁(yè)面美觀還是有一定的影響的，在此分享給各位朋友；

在element組件的級(jí)聯(lián)選擇器中的Hover觸發(fā)級(jí)聯(lián)選擇器的使用中出現(xiàn)問(wèn)題，

element 2.12版本

element 2.12版本中的選擇器，在一定的數(shù)據(jù)量下，顯示正常如圖所示

我所說(shuō)的小bug為另一種情況下，即數(shù)據(jù)超過(guò)一定量的時(shí)候，級(jí)聯(lián)選擇器的顯示范圍為當(dāng)前可視頁(yè)面的全部，而且超過(guò)當(dāng)前可視頁(yè)面，如下圖：

想電商平臺(tái)的分類(lèi)，其數(shù)據(jù)量是巨大的，但也是很常見(jiàn)的網(wǎng)頁(yè)寫(xiě)作，這時(shí)的效果已經(jīng)與element給出的效果圖相差甚大了，雖然為后臺(tái)人員使用，但是也造成了頁(yè)面不美觀和一定程度的使用不便，本人查閱了之前的幾個(gè)版本都無(wú)此問(wèn)題，解決方式為：見(jiàn)下圖

在globel全局樣式文件中加入此代碼即可解決此問(wèn)題，設(shè)置固定的高度，效果如下：

顯示正常效果，

雖然不是什么大問(wèn)題，也要在開(kāi)發(fā)時(shí)注意下，畢竟前端工程師是一個(gè)需要嚴(yán)謹(jǐn)、細(xì)心的工作，連一像素的差別都不放過(guò)的我們，這個(gè)小問(wèn)題怎么能難倒我們呢？

相信官方在下一個(gè)版本中一定會(huì)完善這個(gè)問(wèn)題的。

以上這篇Vue+ElementUI 中級(jí)聯(lián)選擇器Bug問(wèn)題的解決就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。