AntdesignVue 实现下拉树结构懒加载,应用 a -tree-select
<a-tree-select
v-model="queryParam.gmtCreateDeptId"
show-search
style="width: 100%"
:dropdown-style="{maxHeight:'400px', overflow:'auto'}"
:tree-data="signOrgNameOptions"
placeholder=""
allow-clear
tree-data-simple-mode
:load-data="onLoadData"
/>
data(){
return{signOrgNameOptions: []
}
},
created() {this.getTreeNode(0)
},
methods:{getTreeNode (id) {
// 获取最外层数据
getPersonnelTreeLazy(id).then(res => {
res.data.forEach(item => {item.isLeaf = !item.hasChildren})
this.signOrgNameOptions = res.data
})
},
onLoadData(treeNode) {
// 懒加载外部数据
const _this = this
return new Promise(resolve => {if (treeNode.dataRef.hasChildren === true) {getPersonnelTreeLazy(treeNode.dataRef.id).then(res => {
const treeNodeData = res.data
treeNodeData.forEach(item => {item.isLeaf = !item.hasChildren})
treeNode.dataRef.children = treeNodeData
_this.signOrgNameOptions = [..._this.signOrgNameOptions]
resolve()})
}
})
},
}