1. 程式人生 > 其它 >antd 預設展開的三種實現方式

antd 預設展開的三種實現方式

// 預設展開方式一(使用key屬性和defaultExpandedKeys屬性配合):
<Tree
  checkable
  onCheck={onCheck}
  fieldNames={{ title: 'name', key: 'id', children: 'subFolderNodes' }}
  treeData={nodeDataList}
  titleRender={titleNode}
  key={expandedKeys.toString()}
  defaultExpandedKeys={expandedKeys}
/>;
// 預設展開方式二(保證非同步資料拿到後,和defaultExpandedKeys屬性配合):
{ Array.isArray(nodeDataList) && nodeDataList.length > 0 && ( <Tree checkable onCheck={onCheck} fieldNames={{ title: 'name', key: 'id', children: 'subFolderNodes' }} treeData={nodeDataList} titleRender={titleNode} defaultExpandedKeys={expandedKeys}
/> ); }
// 預設展開方式三(使用onExpand屬性和expandedKeys屬性配合):
<Tree
  checkable
  onCheck={onCheck}
  fieldNames={{ title: 'name', key: 'id', children: 'subFolderNodes' }}
  treeData={nodeDataList}
  titleRender={titleNode}
  onExpand={onExpand}
  expandedKeys={expandedKeys}
/>;

注意:在設定expandedKeys時,要判斷非同步資料中以哪個欄位作為key,通常是id欄位