快捷導(dǎo)航

treeSelect樹(shù)組件設(shè)置父節(jié)點(diǎn)禁用的方法實(shí)例

更新時(shí)間：2022年12月24日 10:13:26 作者：小劉加油！

這篇文章主要給大家介紹了關(guān)于treeSelect樹(shù)組件設(shè)置父節(jié)點(diǎn)禁用的相關(guān)資料,文中通過(guò)圖文以及示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

前言：

項(xiàng)目開(kāi)發(fā)中需求方提了這樣一個(gè)需求：下拉框數(shù)據(jù)是樹(shù)形結(jié)構(gòu)，但父節(jié)點(diǎn)禁止點(diǎn)選，只能點(diǎn)擊子節(jié)點(diǎn)。毫無(wú)疑問(wèn)，選用的是 ant design vue 組件庫(kù)的 treeSelect 組件。但該組件默認(rèn)每一級(jí)節(jié)點(diǎn)都可以進(jìn)行選擇，不符合需求。于是開(kāi)始看API，發(fā)現(xiàn) treeData 的 props 有這樣一個(gè)屬性：disabled ，可以控制節(jié)點(diǎn)是否禁用。

思路：

看到這里，心里就有了思路：只需要把接口返回的樹(shù)形數(shù)據(jù)進(jìn)行處理，在每一層的父節(jié)點(diǎn)上添加：disabled: true 屬性即可實(shí)現(xiàn)父節(jié)點(diǎn)禁用。

難點(diǎn):

和普通的數(shù)組數(shù)據(jù)不同，普通數(shù)據(jù)下面不會(huì)嵌套多層 children，而后端接口返回的樹(shù)形數(shù)據(jù)，不能確定嵌套了多少層 children，所以無(wú)法正常使用 map 對(duì)數(shù)據(jù)進(jìn)行遍歷添加。

解決：

方法也很簡(jiǎn)單，使用遞歸即可解決。

為此，我專(zhuān)門(mén)封裝了一個(gè)方法，方面以后使用。

代碼

// 傳參： treeData: 樹(shù)形數(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) : []
    }))
}

效果：

實(shí)現(xiàn)效果如下圖所示：每層的父節(jié)點(diǎn)都被禁用，只有最底層的子節(jié)點(diǎn)才可以進(jìn)行選擇。

總結(jié)

到此這篇關(guān)于treeSelect樹(shù)組件設(shè)置父節(jié)點(diǎn)禁用的文章就介紹到這了,更多相關(guān)treeSelect樹(shù)組件設(shè)置父節(jié)點(diǎn)禁用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

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