源代码
<template>
<div>
<h2>Lazy Load</h2>
<Tree :data="data" @nodeExpand="onNodeExpand($event)"></Tree>
</div>
</template>
<script>
export default {
data() {
return {
data: []
};
},
created() {
this.getNodes().then(data => {
this.data = data;
});
},
methods: {
onNodeExpand(event) {
let node = event;
if (!node.children) {
this.getNodes(node).then(data => {
this.$set(node, "children", data);
});
}
},
getNodes(node) {
let nodes = [
{
id: 1,
text: "My Documents",
children: [
{
id: 11,
text: "Photos",
state: "closed"
},
{
id: 12,
text: "Program Files",
state: "closed"
},
{
id: 13,
text: "index.html"
},
{
id: 14,
text: "about.html"
},
{
id: 15,
text: "welcome.html"
}
]
}
];
let photos = [
{
id: 111,
text: "Friend"
},
{
id: 112,
text: "Wife"
},
{
id: 113,
text: "Company"
}
];
let programs = [
{
id: 121,
text: "Intel"
},
{
id: 122,
text: "Java"
},
{
id: 123,
text: "Microsoft Office"
},
{
id: 124,
text: "Games"
}
];
return new Promise(resolve => {
if (!node) {
resolve(nodes);
return;
}
setTimeout(() => {
if (node.id == 11) {
resolve(photos);
} else if (node.id == 12) {
resolve(programs);
}
}, 1000);
});
}
}
};
</script>