抖音的tree组件父级选中后子级不可选的编写方法

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
  }

 

效果图：