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