<a-card title="树">
<a slot="extra" @click="handleReset">重置</a>
<div style="width: 100%; height: 500px; overflow-y: scroll">
<a-tree
showIcon
:key="treeKey"
:tree-data="treeData"
:load-data="onLoadData"
@select="onSelect"
:replace-fields="replaceFields"
>
<a-icon slot="folder" type="folder" />
</a-tree>
</div>
</a-card>
data(){
return{
treeKey: 0,
treeData: [],
pid:null,
id:null,
replaceFields: {
title: 'name',
key: 'id',
},
}
},
methods:{
handleReset() {
this.queryParam = {
pid: 0,
}
this.$refs.table.refresh(true)
this.handelTree()
},
onLoadData(treeNode) {
return new Promise((resolve) => {
userGroupListTree({ pid: treeNode.eventKey }).then((res) => {
if (res.data != null && res.data.length > 0) {
res.data.map((item) => {
item.slots = { icon: 'folder' }
})
treeNode.dataRef.children = res.data
this.treeData = [...this.treeData]
resolve()
} else {
resolve()
}
})
})
},
handelTree() {
userGroupListTree().then((res) => {
this.$nextTick(() => {
res.data.map((item) => {
item.slots = { icon: 'folder' }
})
this.treeData = res.data
})
})
this.treeKey++
},
onSelect(selectedKeys, info) {
if (info.selected) {
this.queryParam = {
pid: selectedKeys[0],
}
}
this.$refs.table.refresh(true)
this.selectedKeys = selectedKeys[0]
this.id = info.node.dataRef.id
},
}