1.antd異步加載的使用方法:
<Tree checkable //加入checkbook checkStrictly //父子節點是否關注 onCheck={onCheck} //點擊事件 loadData={this.onLoadData1}//這是很關鍵的一部調用異步加載 checkedKeys={defaultTreeData} > <TreeNode title={'★' + '所有分類'} key="00"> {this.renderTreeNodes(getTreeData)} </TreeNode> </Tree>
2.這個時候回去觸發onLoadData1:
onLoadData1 = (treeNode) => { //console.log(treeNode) return new Promise((resolve) => { if (treeNode.props.children) { resolve(); return; } KbService.request(config.host + '/kbmain/getKnowledgeIndexByPid' //這里是在components里面直接調取數據,這里必須就在components取數據才行 ,{"parent_id":treeNode.props.dataRef.cls_id}).done((data) => { treeNode.props.dataRef.children = data; let list = this.state.getTreeData; list.concat(data) this.setState({ getTreeData: list }); resolve(); }); }); }
3.對異步加載出來的數據進行處理:
renderTreeNodes = (data) => { return data.map((item) => { const isLeaf = false if (item.children) { //console.log('item.children----->',item.children) return ( <TreeNode title={item.cls_name} key={item.cls_id} dataRef={item}> {this.renderTreeNodes(item.children)} </TreeNode> ); } //console.log("222222222222222") return <TreeNode title={item.cls_name} key={item.cls_id} dataRef={item} isLeaf={item.isLeaf == 1 ? true : false} />; }); }