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