ant-design-vue/components/tree/demo/dynamic.md

48 lines
1.1 KiB
Markdown
Raw Normal View History

2018-04-13 10:58:58 +00:00
<cn>
#### 异步数据加载
点击展开节点,动态加载数据。
</cn>
<us>
#### load data asynchronously
To load data asynchronously when click to expand a treeNode.
</us>
```html
<template>
2019-09-28 12:45:07 +00:00
<a-tree :loadData="onLoadData" :treeData="treeData" />
2018-04-13 10:58:58 +00:00
</template>
2018-04-14 13:09:35 +00:00
<script>
2019-09-28 12:45:07 +00:00
export default {
data() {
return {
treeData: [
{ title: 'Expand to load', key: '0' },
{ title: 'Expand to load', key: '1' },
{ title: 'Tree Node', key: '2', isLeaf: true },
],
};
2018-04-14 13:09:35 +00:00
},
2019-09-28 12:45:07 +00:00
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();
}, 1000);
});
},
},
};
2018-04-13 10:58:58 +00:00
</script>
```