antd tree使用踩小坑


小白时用tree的时候很容易踩的坑,当你回填了父节点的key时,未选中的子节点是会自动选中的(这时就很有可能忽略未被选中的子节点)
官方给出的文档是有提示的

 

 

所以一般我们就要去处理获得的数据。首先就是要去寻找所有子节点的key及父节点没有children的key,如:
 
const requestList = (arr) => arr.reduce((res, e) => {
  if (e.children && e.children.length > 0) {
    res = [...res, ...requestList(e.children)]
  } else {
    res.push(e.key);
  }
  return res;
}, [])
 
然后就去对比后端反的数据(treeData:tree的节点数据   arr:后台返回的数据)
const result= [...new Set(requestList(treeData))].filter((item) =>new Set(window.eval(arr)).has(item));
 
最后就可以把result回填到tree组件了
<Tree
        onExpand={onExpand}
        expandedKeys={expandedKeys}
        autoExpandParent={autoExpandParent}
        onCheck={onCheck}
        checkedKeys={result}
        treeData={treeData}
      />
 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM