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} />;
});
}