antd異步加載的樹

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} />;
        });
    }
相關文章
相關標籤/搜索