ant design vue中treeselect异步获取数据
结构:<a-tree-select:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }":getPopupContainer="(triggerNode) => triggerNode.parentNode":loadD...
·
结构:
<a-tree-select
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
:getPopupContainer="(triggerNode) => triggerNode.parentNode"
:loadData="onLoadData"
:treeData="orgTree"
@change="orgtreehand"
v-decorator="[
'org_parent_id',
{rules: [{ required: true, initialValue: 1, message: '请选择上级机构!' }]}
]"
>
</a-tree-select>
调用:
export default{
data (){
orgTree: []
},
created: {
// 调用获取树数据的服务
getOrgTree().then(res=>{
this.orgTree = res.result.data
})
},
methods: {
onLoadData (treeNode) {
const _this = this
return new Promise((resolve) => {
if (treeNode.dataRef.children) { // 有值了直接渲染
resolve()
return
}
// 没有值根据当前父节点获取下面子节点并挂在树节点中,添加到对应父节点的children中
getOrgTree({ org_id: treeNode.dataRef.org_id }).then(res => {
treeNode.dataRef.children = res.result.data
_this.orgTree = [..._this.orgTree]
})
resolve()
})
}
}
}
更多推荐
已为社区贡献15条内容
所有评论(0)