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í)現(xiàn)圖片加載完成前的loading組件方法
下面小編就為大家分享一篇vue實(shí)現(xiàn)圖片加載完成前的loading組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
vue實(shí)現(xiàn)給某個(gè)數(shù)據(jù)字段添加顏色
這篇文章主要介紹了vue實(shí)現(xiàn)給某個(gè)數(shù)據(jù)字段添加顏色方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
解決vue2.0 element-ui中el-upload的before-upload方法返回false時(shí)submit(
這篇文章主要介紹了vue2.0 element-ui中el-upload的before-upload方法返回false時(shí)submit()不生效的解決方法，這里需要主要項(xiàng)目中用的element-ui是V1.4.3，感興趣的朋友參考下吧
2018-08-08
Vue2 Vue-cli中使用Typescript的配置詳解
Vue作為前端三大框架之一截至到目前在github上以收獲44,873顆星，足以說(shuō)明其以悄然成為主流。下面這篇文章主要給大家介紹了關(guān)于Vue2 Vue-cli中使用Typescript的配置的相關(guān)資料，需要的朋友可以參考下。
2017-07-07
springboot+vue實(shí)現(xiàn)文件上傳下載
這篇文章主要為大家詳細(xì)介紹了springboot+vue實(shí)現(xiàn)文件上傳下載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
深入理解vue的使用
這篇文章主要介紹了深入理解vue的使用，對(duì)vue感興趣的同學(xué)，可以參考下
2021-05-05
基于 flexible 的 Vue 組件：Toast -- 顯示框效果
這篇文章主要介紹了基于 flexible 的 Vue 組件：Toast -- 顯示框效果,需要的朋友可以參考下
2017-12-12
vue實(shí)現(xiàn)一個(gè)炫酷的日歷組件
公司業(yè)務(wù)新開(kāi)了一個(gè)商家管理微信H5移動(dòng)端項(xiàng)目，日歷控件是商家管理員查看通過(guò)日程來(lái)篩選獲取某日用戶(hù)的訂單等數(shù)據(jù)。下面小編給大家?guī)?lái)了基于vue實(shí)現(xiàn)一個(gè)炫酷的日歷組件，感興趣的朋友參考下吧
2018-10-10
vue引入axios同源跨域問(wèn)題
這篇文章主要介紹了vue引入axios同源跨域問(wèn)題，文章給大家提供了解決方案，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-09-09
Vue之Mixins(混入)的使用方法
這篇文章主要介紹了Vue之Mixins(混入)的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09