标签：arr 父级 res 后子级 tree item 选中 let children

antd貌似也可以试着参考一下，代码如下：

    <Tree
        className="yige-tree"
        treeData={treeData}
        value={selTreeData}
        defaultValue={selTreeData || []}//回显加载之前选中的数据
        multiple
        expandAll
        style={style}
        onChangeWithObject
        checkRelation="unRelated"
        onChange={obj => {
          //点击后更新选中的集合
          setSelTreeData(obj)
        }}
    />

/**
   * 选中数据后重新计算树的选中状态
   */
  useEffect(() => {
    let arr = recursionTree(treeData, false)
    setTreeData([...arr])
  }, [selTreeData])
  
  /**
   * 加载初始化数据的API
   */
  useEffect(() => {
    你的接口API({}).then(ret => {
      let arr = formatTreeData(ret.data?.children, '')
      setTreeData(arr)
    })
  }, [])

  /**
   * 格式化树数组数据，这里加上父ID，方便判断
   * @param arr
   * @returns
   */
  const formatTreeData = (arr: any, parentId: any) => {
    return arr.map(item => {
      return {
        label: item.name,
        value: item.id,
        key: item.id,
        parentId: parentId,
        disabled: false,
        children:
          item.children &&
          item.children.length > 0 &&
          formatTreeData(item.children, item.id),
      }
    })
  }

  /**
   * 递归树,重新计算选中的状态
   */
  const recursionTree = (treeData, childDisabled) => {
    let arr = treeData?.map(item => {
      //如果选中节点的value等于遍历的他下面的父ID就设置为true，并且把disable带入到子孙节点，
      //直到出现不是选中的节点了。这时候用默认的读取数据时设置的false表示不禁用节点
      let disabled = selTreeData?.find(x => x.value == item.parentId)
        ? true
        : childDisabled
      let res = {
        ...item,
        disabled,
      }
      if (res.children && res.children.length > 0) {
        res.children = recursionTree(res.children, disabled)
      }
      return res
    })
    return arr
  }

效果图：

标签：arr,父级,res,后子级,tree,item,选中,let,children
来源： https://www.cnblogs.com/llcdbk/p/16160032.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。