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中輸入框事件的使用及數(shù)值校驗方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue+ElementUi實現(xiàn)點擊表格鏈接頁面跳轉(zhuǎn)和路由效果
這篇文章主要介紹了Vue+ElementUi實現(xiàn)點擊表格中鏈接進(jìn)行頁面跳轉(zhuǎn)和路由,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章主要介紹了 詳解在vue使用weixin-js-sdk常見使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
使用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-10
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,是目前最火的前端框架之一,是前端工程師的必備技能,下面這篇文章主要給大家介紹了關(guān)于Vue3.2.x中的小技巧及注意事項的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要和大家一起學(xué)習(xí)vue.js的計算屬性，分享一些計算屬性練習(xí)代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Vue實現(xiàn)動態(tài)查詢規(guī)則生成組件
今天我們來給大家介紹下在Vue開發(fā)中我們經(jīng)常會碰到的一種需求場景，本文主要介紹了Vue動態(tài)查詢規(guī)則生成組件，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vuecli項目構(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
我們大家在開發(fā)中,經(jīng)常會遇到接口重復(fù)請求導(dǎo)致的各種問題,下面這篇文章主要給大家介紹了關(guān)于axios攔截器之重復(fù)請求取消的相關(guān)資料,需要的朋友可以參考下2021-09-09
解決報錯ValidationError: Progress Plugin Invalid&
這篇文章主要介紹了解決報錯ValidationError: Progress Plugin Invalid Options問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11