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 }
效果图:
原创文章,作者:254126420,如若转载,请注明出处:https://blog.ytso.com/245688.html