最近在專案中需要用到級聯這麼個控制元件，所以便去element上找了個，發現了個問題，在這裡跟大家分享下，介於公司專案的隱私性，所以一些文字便給大家打上馬賽克了，敬請諒解~

不多說廢話，直接上問題：

ElemenUI的級聯是通過子級欄位遞迴進行顯示的，但是假如後端老鐵也用了遞迴寫的資料，而遞迴到最後一個數據集便出現了問題，會出現光有欄位，但是卻沒有資料這麼個情況在這裡插入圖片描述

這時候就出現了問題：

最後一級會多出來一個級聯，這種體驗便造成了很不好的感覺。

解決辦法：

將獲取這些級聯的資料作為引數傳到這個遞迴函式當中，進行從組，假如遞迴到[ ] 轉換為undefined(‘不識別')，這樣就解決了這個多一個空級聯的問題

補充知識：**vue，element.ui元件很容易忽略的坑--------級聯選擇器中的小bug**

前一段時間在使用vue2x版本進行電商後臺的重構時發現的此版本的小bug，雖然不算什麼大事，但對使用者體驗和頁面美觀還是有一定的影響的，在此分享給各位朋友；

在element元件的級聯選擇器中的Hover觸發級聯選擇器的使用中出現問題，

element 2.12版本

element 2.12版本中的選擇器，在一定的資料量下，顯示正常如圖所示

我所說的小bug為另一種情況下，即資料超過一定量的時候，級聯選擇器的顯示範圍為當前可視頁面的全部，而且超過當前可視頁面，如下圖：

想電商平臺的分類，其資料量是巨大的，但也是很常見的網頁寫作，這時的效果已經與element給出的效果圖相差甚大了，雖然為後臺人員使用，但是也造成了頁面不美觀和一定程度的使用不便，本人查閱了之前的幾個版本都無此問題，解決方式為：見下圖

在globel全域性樣式檔案中加入此程式碼即可解決此問題，設定固定的高度，效果如下：

顯示正常效果，

雖然不是什麼大問題，也要在開發時注意下，畢竟前端工程師是一個需要嚴謹、細心的工作，連一畫素的差別都不放過的我們，這個小問題怎麼能難倒我們呢？

相信官方在下一個版本中一定會完善這個問題的。

以上這篇Vue+ElementUI 中級聯選擇器Bug問題的解決就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。