I have written about the tree-shaped lazy loading of Element ui before,
which is mainly realized through the load function,
and TDesign is also a picture of a tiger,
and it also mainly relies on load
Let's start with a basic component
<template>
<t-tree :data="items" :load="load" />
</template>
<script lang="jsx">
export default {
data() {
return {
items: [
{
label: '1',
children: true,
},
{
label: '2',
children: true,
},
],
};
},
methods: {
load(node) {
console.log(node);
return new Promise((resolve) => {
setTimeout(() => {
let nodes = [
{
label: '3',
children: false,
},
];
resolve(nodes);
}, 500);
});
},
},
};
</script>
The difference from Element ui here is that the tree-shaped load of Element ui will be triggered once when it comes in.
You can load the data of the root directory through load,
but TDesign will only be triggered when you click on the parent node. It will not be triggered when you enter,
so the first level For the data, you have to find a way to get the tree-bound data by yourself.
Like here, I directly write the data to items.
If it is request data, you have to assign the first level to the data-bound attribute in the life cycle,
and then we Run the project
and then we click this to trigger load to bring out the data at the lower level.
I just returned here without thinking.
[
{
label: '3',
children: false,
},
];
In practice, the data structure must be based on the parent id.
Then, the children are used to control whether there is a subset. If
you assign true, it will display the arrow that can be expanded. If you set
false, it means that there is no such arrow if there is no subset.
