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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM