antd tree树形控件 onCheck单选并准确获取父子节点
antd tree树形控件 onCheck单选并准确获取父子节点
·
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 返回的参数是以为你选了当前这个值,还有上一个的节点,它将两个的信息都返回了。所以就只能硬着头皮处理数据了。
更多推荐
已为社区贡献5条内容
所有评论(0)