treeSelect树组件设置父节点禁用

女爷i 2024-03-31 09:23 53阅读 0赞

### 前言： ###

项目开发中需求方提了这样一个需求：下拉框数据是树形结构，但**父节点禁止点选，只能点击子节点**。毫无疑问，选用的是 `ant design vue` 组件库的 `treeSelect` 组件。但该组件默认每一级节点都可以进行选择，不符合需求。于是开始看API，发现 `treeData` 的 props 有这样一个属性：`disabled` ，可以控制节点是否禁用。

![在这里插入图片描述][20968b98ac514b0a8d4735ab46bbc3dc.png]

### 思路： ###

看到这里，心里就有了思路：只需要把接口返回的树形数据进行处理，在每一层的父节点上添加：`disabled: true` 属性即可实现父节点禁用。

### 难点: ###

和普通的数组数据不同，普通数据下面不会嵌套多层 `children`，而后端接口返回的树形数据，不能确定嵌套了多少层 `children`，所以无法正常使用 `map` 对数据进行遍历添加。

### 解决： ###

方法也很简单，使用 `递归` 即可解决。

为此，我专门封装了一个方法，方面以后使用。

### 代码 ###

// 传参： treeData: 树形数据
    const addKey = (treeData: any) => {
        
        return treeData.map((item: any) => ({
        
             ...item,
             disabled: item.childrenList?.length>0 ? true : false,
             childrenList: item.childrenList?addKey(item.childrenList) : []
        }))
    }

### 效果： ###

实现效果如下图所示：每层的父节点都被禁用，只有最底层的子节点才可以进行选择。  
![在这里插入图片描述][5314d723810b445d95f3bf8c672d1e2d.png]

[20968b98ac514b0a8d4735ab46bbc3dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/6e2d494b76f8457db91d7b0469742a6b.png
[5314d723810b445d95f3bf8c672d1e2d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/eabe4467e5c247aba979b8f84da8a380.png