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

前言

对于常规数组来说，我们想要获取某一个值，或者给每层添加属性，只需要使用 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) : []
        }))
    }