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()
})
}
})
},
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。