2018-04-13 18:58:58 +08:00
|
|
|
<cn>
|
|
|
|
#### 异步数据加载
|
|
|
|
点击展开节点,动态加载数据。
|
|
|
|
</cn>
|
|
|
|
|
|
|
|
<us>
|
|
|
|
#### load data asynchronously
|
|
|
|
To load data asynchronously when click to expand a treeNode.
|
|
|
|
</us>
|
|
|
|
|
|
|
|
```html
|
|
|
|
<template>
|
2018-04-14 21:09:35 +08:00
|
|
|
<a-tree
|
|
|
|
:loadData="onLoadData"
|
2018-09-26 22:57:01 +08:00
|
|
|
:treeData="treeData"
|
2018-04-14 21:09:35 +08:00
|
|
|
/>
|
2018-04-13 18:58:58 +08:00
|
|
|
</template>
|
|
|
|
|
2018-04-14 21:09:35 +08:00
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
treeData: [
|
|
|
|
{ title: 'Expand to load', key: '0' },
|
|
|
|
{ title: 'Expand to load', key: '1' },
|
|
|
|
{ title: 'Tree Node', key: '2', isLeaf: true },
|
|
|
|
],
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
onLoadData (treeNode) {
|
|
|
|
return new Promise((resolve) => {
|
|
|
|
if (treeNode.dataRef.children) {
|
|
|
|
resolve()
|
|
|
|
return
|
|
|
|
}
|
|
|
|
setTimeout(() => {
|
|
|
|
treeNode.dataRef.children = [
|
|
|
|
{ title: 'Child Node', key: `${treeNode.eventKey}-0` },
|
|
|
|
{ title: 'Child Node', key: `${treeNode.eventKey}-1` },
|
|
|
|
]
|
|
|
|
this.treeData = [...this.treeData]
|
|
|
|
resolve()
|
2018-04-16 21:38:28 +08:00
|
|
|
}, 1000)
|
2018-04-14 21:09:35 +08:00
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}
|
2018-04-13 18:58:58 +08:00
|
|
|
</script>
|
2018-04-14 21:09:35 +08:00
|
|
|
|
2018-04-13 18:58:58 +08:00
|
|
|
```
|