antd 树组件异步加载动态渲染

//树组件

                                <antTree

                                    checkable

                                    onCheck={this.onCheck}

                                    checkedKeys={this.checkedKeys}

                                    //onSelect={this.onSelect}

                                    //selectedKeys={this.selectedKeys}

                                    loadData={this.onLoadData}

                                >

                                    {this.renderTreeNodes(this.treeData)}

                                </antTree>                  　　

//渲染节点方法
    renderTreeNodes(data){
        return data.map((item) => {
            //有children就递归渲染
            if (item?.children) {
                return (
                    <antTreeNode title={item.name} key={item.code} dataRef={item}>
                        {this.renderTreeNodes(item?.children)}
                    </antTreeNode>
                );
            }
            //没有children就直接返回节点
            return <antTreeNode title={item.name} key={item.code} dataRef={item} isLeaf={item.parentFlag != '1' ? true : false} />;
        });
    },

//异步加载数据方法
    onLoadData(treeNode){
        console.log(treeNode)
        return new Promise((resolve:any) => {
            if (treeNode.children) {
                resolve();
                return;
            }
            //子item的参数和首次的参数
            let params = {
                id:treeNode.dataRef.id||treeNode.id,
                vehicleType:treeNode.dataRef.vehicleType||treeNode.vehicleType
            }
            //异步请求获取数据就在这触发
            Service.queryVehicleStruct(params).then((res: any) => {
                //这一步会将得到的数据注入到treeNode的子数组
                treeNode.dataRef.children = res;
                //这一步会触发重新渲染，此时子数组已被添加到treeData
                this.renderTreeNodes(this.treeData);
                resolve();
            }).catch((e) => {
                message.error(e.message||'网络错误');
            }).finally(()=>{
                //this.loading = false;
            })
        });
    },

 //方法
//复选框勾选
onCheck(checkedKeys) {
        this.checkedKeys = checkedKeys;
        console.log(this.checkedKeys);
    },
    
//点击树节点    
onSelect(selectedKeys, info){
        this.selectedKeys = selectedKeys;
    },