操作树形数据方法封装：获取树形数据的某个值、给树形数据每层添加属性

r囧r小猫 2024-03-31 09:24 53阅读 0赞

### 前言 ###

对于常规数组来说，我们想要获取某一个值，或者给每层添加属性，只需要使用 `fileter`、`map` 等等的方法，相对来说比较简单。

树形数据不同于常规的数组数据，不能确定其内部包含多少个子节点，即children。所以我们在操作树形数据的时候，不同于常规数据。

其实操作树形数据也很简单，其核心就是 `递归`。

### 1. 封装获取树形数据的某个值 ###

传参：

*  treeData： 树形数据
 *  key：需要匹配的字段名
 *  value：需要匹配的字段值
 *  field：需要查找的字段

const findValue = (treeData: any, key: any, value: any, field: any) => {
        
                let res: any = null;
                const fn = (treeData: any, key: any, value: any, field: any) => {
        
                    if (!treeData?.length) return key
                    for (let index = 0; index < treeData.length; index++) {
        
                        if (treeData[index][key] === value) {
        
                            res = treeData[index][field]
                            break;
                        }
                        if (treeData[index]?.childrenList?.length) {
        
                            fn(treeData[index].childrenList, key, value, field)
                        }
                    }
                }
                fn(treeData, key, value, field)
                return res
            }

### 2. 给树形数据每层添加属性 ###

const addKey = (treeData: any) => {
        
            return treeData.map((item: any) => ({
        
                ...item,
                disabled: item.childrenList?.length>0 ? true : false,
                childrenList: item.childrenList?addKey(item.childrenList) : []
            }))
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，53人围观）

还没有评论，来说两句吧...

相关阅读

相关操作树形数据方法封装：获取树形数据的某个值、给树形数据每层添加属性

前言对于常规数组来说，我们想要获取某一个值，或者给每层添加属性，只需要使用 `fileter`、`map` 等等的方法，相对来说比较简单。树形数据不同于常规的数组数

r囧r小猫/ 2024年03月31日 09:24/ 0 赞/ 54 阅读

相关 Java获取树形结构数据

目录前言：开发前准备：数据库：实体类： VO对象：代码实现： Controller层： Service层：运行结果：第二种前言：在

旧城等待，/ 2024年03月16日 13:42/ 0 赞/ 47 阅读

相关树形结构数据

在我们工作中经常会遇到一些树形结构的数据,比如机构组织树,这个时候我们就需要拼装树形结构的数据，返回给前端。 1.首先准备数据（数据中一定会包括主键、名称、父节点）

分手后的思念是犯贱/ 2023年09月29日 04:29/ 0 赞/ 43 阅读

相关构建树形菜单数据

菜单实体： @Data public class SysMenu { / 菜单编码 /

深藏阁楼爱情的钟/ 2023年08月17日 17:39/ 0 赞/ 90 阅读

相关 element的表单树形结构（树形数据）不能折叠

我的是因为一级标签id为空，所以不能收缩 list2:[ { id:"1", 《《《《之前是因为这个id为

墨蓝/ 2023年07月10日 14:12/ 0 赞/ 26 阅读

相关 SpringBoot Java将数据封装成树形结构返回给前端

> 根据level\_code列封装树形数据结构 > 每四位为一个节点 > 0001、0002…为根节点，诸如此类四位为第一层根节点 > 00010001、0001

红太狼/ 2022年12月16日 09:07/ 0 赞/ 275 阅读

相关树形数据，给每一层添加一个新的属性 key:‘xxx‘

[{ "id": 1, "name": "广告销售", "depCode": "MI00", "fatherId": null,

我就是我/ 2022年10月23日 05:52/ 0 赞/ 37 阅读

相关 js扁平数据转成树形数据&树形数据转成扁平数据

1、扁平数据转成树形数据 function setTreeData(source){ let cloneData = JSON.parse(JSO

╰半夏微凉°/ 2022年09月03日 10:28/ 0 赞/ 183 阅读

相关 [导入]树形数据转换

大纲式的树形数据追加到无限分级式数据表中 ![225430.aspx][] 文章来源: [http://blog.csdn.net/zjcxc/archive/2004/1

Dear 丶/ 2022年03月28日 02:49/ 0 赞/ 161 阅读

相关树形数据结构——ClosureTable

文章目录思想来源源码文件目录结构项目源码测试源码测试结果完整项目源码思想来源

比眉伴天荒/ 2021年10月19日 02:32/ 0 赞/ 908 阅读