antd 的tree树形控件为什么没有单选属性?(还是我眼瞎没找到)

需求: 一个只能单选的tree树形控件,并且点击选中一个节点返回当前节点信息和父节点信息。

看上去很普通的需求,但是实现起来真的麻烦(就因为tree的onCheck没有单选的问题)。

效果

上代码

<Tree
	checkable
	defaultExpandAll
	checkedKeys={checkedKeys}
 	treeData={allClassify}
	onCheck={onCheck}
	onRightClick={createRightClick}
/>
  // 一级分类 父节点
  const [curParentKey, setCurParentKey] = useState<string>('')
  // 二级分类 子节点
  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
  // 用于判断是否是从选中父子节点(父下只有一个子的情况)到只有子节点的过程
  let [isSelectParent, setIsSelectParent] = useState<boolean>(false)
  // 模态框中选中分类
  const onCheck = (key:any, e:any) => {
    // 情况一:取消选中
    if(!key.length) return
    // 情况二:子只有一级,选中子,父也被选中了
    if((key.length > 2 && !isSelectParent) || !e.halfCheckedKeys.length) {
      setIsSelectParent(true)
      setCurParentKey(key[key.length - 1])
      setCheckedKeys([key[key.length - 2]])
      return 
    } 
    setIsSelectParent(false)
    // 情况三:正常选择,由于需要改为单选,但参数返回的数据会记录之前一次的选择,所以需要处理
    if(e.halfCheckedKeys.length === 1) {
      setCurParentKey(e.halfCheckedKeys[0])
    } else {
      // 半选节点(halfCheckedKeys)是按顺序的,所以这样处理
      for(let item of e.halfCheckedKeys) {
        if(item !== curParentKey) {
          setCurParentKey(item)
          break
        }
      }
    }
    setCheckedKeys(key.length === 0 ? [] : [key[key.length - 1]])
  }  

由于 onCheck 函数返回的是选中的节点的信息,但是我又想做成单选的,所以就会导致返回的参数信息不符合需求。

通过 setCheckedKeys() 只在数组中加入一个值就能实现单选的效果。但是 onCheck 返回的参数是以为你选了当前这个值,还有上一个的节点,它将两个的信息都返回了。所以就只能硬着头皮处理数据了。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐