antd of vue treeSelect——异步加载

<a-tree-select
    style="width: 90%"
    allowClear
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    :treeData="personData"
    showSearch
    :load-data="onLoadData"
/>
onLoadData(treeNode){
    var that = this
    return new Promise((resolve) => {
        if (treeNode.$vnode.children) {
            resolve()
            return
        }
        const { id } = treeNode.dataRef
        let pid = treeNode.$vnode.key
        let param = {
            pid:pid,
            condition:false
        }
        getAction('/basic/basicStaff/findStaffByOfficeForSelect', { officeId: id }).then((res) => {
            if(res.success){
                for(let i of res.result){
                    i.value = i.key
                    if(i.leaf == false){
                        i.isLeaf = false
                    }else if(i.leaf == true){
                        i.isLeaf = true
                    }
                }
                this.addChildren(pid,res.result,this.personData)
                this.personData = [...this.personData]
            }
            resolve()
        })
    })
},
addChildren(pid,children,treeArray){
    if(treeArray && treeArray.length>0){
        for(let item of treeArray){
            if(item.key == pid){
                if(!children || children.length==0){
                }else{
                    item.children = children
                }
                break
            }else{
                this.addChildren(pid,children,item.children)
            }
        }
    }
},

注意:返回的数据字段要有 isLeaf 属性(判断是否是叶子节点)


版权声明:本文为who_become_gods原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。