史上最全最好用的tree结构处理

  // 转换后格式扁平化，value:每一层叠加， name: 内一层的name叠加
  // [
  // {
  //     "value": "1,1-1,1-1-1",
  //     "name": "1,1-1,1-1-1"
  // },
  // {
  //     "value": "2,2-1,2-1-1",
  //     "name": "2,2-1,2-1-1"
  // }
  // ]
 
 let data1 = [
    {
      name: "name-1",
      value: "1",
      children: [
        {
          name: "name-1-1",
          value: "1-1",
          children: [{ name: "name-1-1-1", value: "1-1-1" }],
        },
      ],
    },
    {
      name: "name-2",
      value: "2",
      children: [
        {
          name: "name-2-1",
          value: "2-1",
          children: [{ name: "name-2-1-1", value: "2-1-1" }],
        },
      ],
    },
  ];
  const FlattenData = (data, value='', name='') => {
    if (Array.isArray(data) && data.length) {
      return data.map((v) =>
      FlattenData(
          Array.isArray(v.children) ? v.children : v, value + `,${v.value}`,
          name + `,${v.name}`
        )
      );
    } else {
      return {
        value: value.substr(1),
        name: name.substr(1),
      };
    }
  }
// console.log(111, FlattenData(data1).flat(Infinity))

  const addLabel = (data, label='') => {
    data.map(v => {
      const connect = label ? '，' : ''
      v.label = label + connect + v.name
      if(v.children) {
        addLabel(v.children, v.label)
      }
    })
    return data
  }
  // 给每一层加label,是对应的name 叠加
  // [
  //   {
  //       "name": "name-1",
  //       "value": "1",
  //       "children": [
  //           {
  //               "name": "name-1-1",
  //               "value": "1-1",
  //               "children": [
  //                   {
  //                       "name": "name-1-1-1",
  //                       "value": "1-1-1",
  //                       "label": "name-1，name-1-1，name-1-1-1"
  //                   }
  //               ],
  //               "label": "name-1，name-1-1"
  //           }
  //       ],
  //       "label": "name-1"
  //   },
  //   {
  //       "name": "name-2",
  //       "value": "2",
  //       "children": [
  //           {
  //               "name": "name-2-1",
  //               "value": "2-1",
  //               "children": [
  //                   {
  //                       "name": "name-2-1-1",
  //                       "value": "2-1-1",
  //                       "label": "name-2，name-2-1，name-2-1-1"
  //                   }
  //               ],
  //               "label": "name-2，name-2-1"
  //           }
  //       ],
  //       "label": "name-2"
  //   }
  // ]
  console.log(222, addLabel(data1))

//获取当前id的子节点
export const getChildrenById = (tree, id) => {
  for (let i = 0; i < tree?.length; i++) {
    if (tree[i]?.id === id) {
      if (tree[i]?.children) {
        return tree[i].children
      }
    } else if (tree[i].children) {
      const children = getChildrenById(tree[i].children, id)
      if (children) {
        return children
      }
    }
  }
  return null
}

 // tree结构选中一个节点，修改父子节点状态
 changeStatus(data1, '1-1', true, '1')
      
 // 修改当前节点的所有子元素状态
      const changeChildren = (tree, id, checked, type) => {
        tree.map(v => {
          if (v.id === id || type === "children") {
            v.isChecked = checked
            v.isIndeterminate = false
            if (v.children) {
              changeChildren(v.children, id, checked, "children")
            }
          } else if (v.children) {
            changeChildren(v.children, id, checked)
          }
        })
      }
      // 修改当前节点的所有父元素状态countyid（父元素id）
      const changeParents = (tree, countyid) => {
        if (countyid) {
          tree.map(v => {
            if (v.id === countyid && v.children) {
              const length = v.children.filter(v1 => v1.isChecked).length
              if (length === v.children.length) {
                v.isChecked = true
                v.isIndeterminate = false
              } else if (length > 0) {
                v.isIndeterminate = true
                v.isChecked = false
              } else if (length === 0) {
                v.isIndeterminate = false
                v.isChecked = false
              }
              changeParents(tree, v.countyid)
            } else if (v.children) {
              changeParents(v.children, countyid)
            }
          })
        }
      }
      const changeStatus = (tree, id, checked, parantId) => {
         // 修改当前节点 + 子节点状态
        changeChildren(tree, id, checked)
        // 修改父节点状态
        changeParents(tree, parantId)
        return tree
      }

// 当前元素选中，当前元素的其他元素+大于等于当前层级其他元素都取消选中
export const changeSingleStatus = (tree, id, checked, level) => {
  for (let i = 0; i < tree?.length; i++) {
    if (tree[i]?.id === id) {
      tree[i].isChecked = checked
    }
    if (tree[i]?.id !== id && tree[i]?.level >= level) {
      tree[i].isChecked = !checked
    }
    if (tree[i]?.children) {
      changeSingleStatus(tree[i].children, id, checked, level)
    }
  }
  return tree
}