Vue+ElementUI 中級(jí)聯(lián)選擇器Bug問題的解決
最近在項(xiàng)目中需要用到級(jí)聯(lián)這么個(gè)控件，所以便去element上找了個(gè)，發(fā)現(xiàn)了個(gè)問題，在這里跟大家分享下，介于公司項(xiàng)目的隱私性，所以一些文字便給大家打上馬賽克了，敬請(qǐng)諒解~
不多說廢話，直接上問題：
ElemenUI的級(jí)聯(lián)是通過子級(jí)字段遞歸進(jìn)行顯示的，但是假如后端老鐵也用了遞歸寫的數(shù)據(jù)，而遞歸到最后一個(gè)數(shù)據(jù)集便出現(xiàn)了問題，會(huì)出現(xiàn)光有字段，但是卻沒有數(shù)據(jù)這么個(gè)情況在這里插入圖片描述
這時(shí)候就出現(xiàn)了問題：
最后一級(jí)會(huì)多出來一個(gè)級(jí)聯(lián)，這種體驗(yàn)便造成了很不好的感覺。
解決辦法：
將獲取這些級(jí)聯(lián)的數(shù)據(jù)作為參數(shù)傳到這個(gè)遞歸函數(shù)當(dāng)中，進(jìn)行從組，假如遞歸到[ ] 轉(zhuǎn)換為undefined(‘不識(shí)別')，這樣就解決了這個(gè)多一個(gè)空級(jí)聯(lián)的問題
補(bǔ)充知識(shí)：**vue，element.ui組件很容易忽略的坑--------級(jí)聯(lián)選擇器中的小bug**
前一段時(shí)間在使用vue2x版本進(jìn)行電商后臺(tái)的重構(gòu)時(shí)發(fā)現(xiàn)的此版本的小bug，雖然不算什么大事，但對(duì)用戶體驗(yàn)和頁面美觀還是有一定的影響的，在此分享給各位朋友；
在element組件的級(jí)聯(lián)選擇器中的Hover觸發(fā)級(jí)聯(lián)選擇器的使用中出現(xiàn)問題，
element 2.12版本
element 2.12版本中的選擇器，在一定的數(shù)據(jù)量下，顯示正常如圖所示
我所說的小bug為另一種情況下，即數(shù)據(jù)超過一定量的時(shí)候，級(jí)聯(lián)選擇器的顯示范圍為當(dāng)前可視頁面的全部，而且超過當(dāng)前可視頁面，如下圖：
想電商平臺(tái)的分類，其數(shù)據(jù)量是巨大的，但也是很常見的網(wǎng)頁寫作，這時(shí)的效果已經(jīng)與element給出的效果圖相差甚大了，雖然為后臺(tái)人員使用，但是也造成了頁面不美觀和一定程度的使用不便，本人查閱了之前的幾個(gè)版本都無此問題，解決方式為：見下圖
在globel全局樣式文件中加入此代碼即可解決此問題，設(shè)置固定的高度，效果如下：
顯示正常效果，
雖然不是什么大問題，也要在開發(fā)時(shí)注意下，畢竟前端工程師是一個(gè)需要嚴(yán)謹(jǐn)、細(xì)心的工作，連一像素的差別都不放過的我們，這個(gè)小問題怎么能難倒我們呢？
相信官方在下一個(gè)版本中一定會(huì)完善這個(gè)問題的。
以上這篇Vue+ElementUI 中級(jí)聯(lián)選擇器Bug問題的解決就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-router跳轉(zhuǎn)時(shí)打開新頁面的兩種方法
這篇文章主要給大家介紹了關(guān)于vue-router跳轉(zhuǎn)時(shí)打開新頁面的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue-router具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
<Teleport> 是 Vue 3 的一個(gè)內(nèi)置組件,允許將組件的內(nèi)容渲染到 DOM 中的任意位置,而不改變其邏輯結(jié)構(gòu),這篇文章主要介紹了Vue 3 的＜Teleport＞功能與用法詳解,需要的朋友可以參考下2025-04-04
Vue3訪問頁面時(shí)自動(dòng)獲取數(shù)據(jù)的方法實(shí)現(xiàn)
本文介紹了在Vue3中如何利用生命周期鉤子函數(shù)和定時(shí)器實(shí)現(xiàn)訪問頁面時(shí)自動(dòng)獲取數(shù)據(jù)的方法,這種方法適用于需要在頁面加載時(shí)即時(shí)更新數(shù)據(jù)顯示的場(chǎng)景,感興趣的可以了解一下2024-11-11
antd vue 如何調(diào)整checkbox默認(rèn)樣式
這篇文章主要介紹了antd vue 如何調(diào)整checkbox默認(rèn)樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
實(shí)現(xiàn)一個(gè)VUE響應(yīng)式屬性裝飾器詳析
這篇文章主要介紹了實(shí)現(xiàn)一個(gè)VUE響應(yīng)式屬性裝飾器詳析，文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
Vue自定義表單驗(yàn)證(rule，value，callback)使用詳解
這篇文章主要介紹了Vue自定義表單驗(yàn)證(rule，value，callback)使用詳解,今天我們講一講自定義驗(yàn)證規(guī)則具體使用場(chǎng)景和它的三個(gè)參數(shù)意思和使用，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue剔除數(shù)組指定位置元素的幾種方法,文中主要介紹了單個(gè)去除和批量去除這兩種方法,并通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-03-03
Vue.js實(shí)現(xiàn)網(wǎng)格列表布局轉(zhuǎn)換方法
下面小編就為大家?guī)硪黄猇ue.js實(shí)現(xiàn)網(wǎng)格列表布局轉(zhuǎn)換方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
Vue3獲取和操作DOM元素的項(xiàng)目實(shí)踐
在Vue3中,有時(shí)我們需要直接操作DOM節(jié)點(diǎn)，本文主要介紹了Vue3獲取和操作DOM元素的項(xiàng)目實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
這篇文章主要給大家介紹了關(guān)于Vue圖片裁剪組件的相關(guān)資料,本文介紹的組件是基于vue-cropper二次封裝,vue-cropper大家應(yīng)該都很熟悉了吧,需要的朋友可以參考下2021-07-07