antd 預設展開的三種實現方式
阿新 • • 發佈:2022-05-09
// 預設展開方式一(使用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欄位