ant design of vue a-tree 异步加载
a-tree 异步树真是太多坑了,不显示文字,点击根节点没反应,点击子节点没反应,点击子节点出现的是上一个子节点内容,切换是否展示监管部门时点击过的子节点没反应,好在问题都一一解决了,记录一下。<a-checkbox @change="onCheckboxDeptChange"> 是否展现非监管部门 </a-checkbox><a-tree:replaceFields
·
a-tree 异步树真是太多坑了,不显示文字,点击根节点没反应,点击子节点没反应,点击子节点出现的是上一个子节点内容,切换是否展示监管部门时点击过的子节点没反应,好在问题都一一解决了,记录一下。
<a-checkbox @change="onCheckboxDeptChange"> 是否展现非监管部门 </a-checkbox>
<a-tree
:replaceFields="replaceFields"
:loadedKeys="loadedKeys"
@expand="onExpand"
@load="loadDept"
:expandedKeys="expandedKeys"
:load-data="onLoadDeptData"
:tree-data="treeDeptData"
/>
data() {
return {
loadedKeys: [],
expandedKeys: [],
isShowAll: false, //非监管部门是否展示
treeDeptData: [],
replaceFields: {
children: 'children',
title: 'text',
key: 'id',
}, // 树数据结构匹配替换映射
}
}
//loadedKeys (受控)已经加载的节点,需要配合 loadData 使用
// 节点加载完毕时触发
loadDept(loadedKeys) {
this.loadedKeys = loadedKeys
},
//展开/收起节点时触发
onExpand(keys) {
// expandedKeys(.sync) (受控)展开指定的树节点
this.expandedKeys = keys
},
// 异步加载数据
onLoadDeptData(treeNode) {
return new Promise((resolve) => {
setTimeout(() => {
this.requestGet(
`/Dept/RegionDeptTreeByParent?isShowAll=${this.isShowAll}&&nodeTypeValue=${treeNode.dataRef.typeEnum}&&parent=${treeNode.dataRef.id}`
).then((res) => {
treeNode.dataRef.children = res.data.map((item) => {
return item
})
this.treeDeptData = [...this.treeDeptData]
resolve()
}, 1000)
})
})
},
//获取树结构
RegionDeptTreeByParent() {
this.loadedKeys=[]
this.expandedKeys=[]
this.requestGet('/Dept/RegionDeptTreeByParent').then((res) => {
this.treeDeptData = res.data.map((item) => {
item.isLeaf = false
return item
})
})
},
//是否展现非监管部门
onCheckboxDeptChange(e) {
console.log(`checked = ${e.target.checked}`)
if (e.target.checked == true) {
this.isShowAll = true
} else {
this.isShowAll = false
}
this.treeDeptData=[]
this.RegionDeptTreeByParent()
},
更多推荐
已为社区贡献4条内容
所有评论(0)