treeSelect樹組件設(shè)置父節(jié)點禁用的方法實例
前言:
項目開發(fā)中需求方提了這樣一個需求:下拉框數(shù)據(jù)是樹形結(jié)構(gòu),但父節(jié)點禁止點選,只能點擊子節(jié)點。毫無疑問,選用的是 ant design vue
組件庫的 treeSelect
組件。但該組件默認(rèn)每一級節(jié)點都可以進(jìn)行選擇,不符合需求。于是開始看API,發(fā)現(xiàn) treeData
的 props 有這樣一個屬性:disabled
,可以控制節(jié)點是否禁用。
思路:
看到這里,心里就有了思路:只需要把接口返回的樹形數(shù)據(jù)進(jìn)行處理,在每一層的父節(jié)點上添加:disabled: true
屬性即可實現(xiàn)父節(jié)點禁用。
難點:
和普通的數(shù)組數(shù)據(jù)不同,普通數(shù)據(jù)下面不會嵌套多層 children
,而后端接口返回的樹形數(shù)據(jù),不能確定嵌套了多少層 children
,所以無法正常使用 map
對數(shù)據(jù)進(jìn)行遍歷添加。
解決:
方法也很簡單,使用 遞歸 即可解決。
為此,我專門封裝了一個方法,方面以后使用。
代碼
// 傳參: treeData: 樹形數(shù)據(jù) const addKey = (treeData: any) => { return treeData.map((item: any) => ({ ...item, disabled: item.childrenList?.length>0 ? true : false, childrenList: item.childrenList?addKey(item.childrenList) : [] })) }
效果:
實現(xiàn)效果如下圖所示:每層的父節(jié)點都被禁用,只有最底層的子節(jié)點才可以進(jìn)行選擇。
總結(jié)
到此這篇關(guān)于treeSelect樹組件設(shè)置父節(jié)點禁用的文章就介紹到這了,更多相關(guān)treeSelect樹組件設(shè)置父節(jié)點禁用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue+ElementUi實現(xiàn)點擊表格鏈接頁面跳轉(zhuǎn)和路由效果
這篇文章主要介紹了Vue+ElementUi實現(xiàn)點擊表格中鏈接進(jìn)行頁面跳轉(zhuǎn)和路由,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03使用vue實現(xiàn)滑動滾動條來加載數(shù)據(jù)
在vuejs中,我們經(jīng)常使用axios來請求數(shù)據(jù),但是有時候,我們請求的數(shù)據(jù)量很大,那么我們?nèi)绾螌崿F(xiàn)滑動滾動條來加載數(shù)據(jù)呢,接下來小編就給大家介紹一下在vuejs中如何實現(xiàn)滑動滾動條來動態(tài)加載數(shù)據(jù),需要的朋友可以參考下2023-10-10Vue實現(xiàn)動態(tài)查詢規(guī)則生成組件
今天我們來給大家介紹下在Vue開發(fā)中我們經(jīng)常會碰到的一種需求場景,本文主要介紹了Vue動態(tài)查詢規(guī)則生成組件,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05vuecli項目構(gòu)建SSR服務(wù)端渲染的實現(xiàn)
這篇文章主要介紹了vuecli項目構(gòu)建SSR服務(wù)端渲染的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10解決報錯ValidationError: Progress Plugin Invalid&
這篇文章主要介紹了解決報錯ValidationError: Progress Plugin Invalid Options問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11