之前我有寫過Element ui的樹形懶加載
其主要是通過load函數(shù)來實現(xiàn)
而TDesign也是照虎畫貓
他也是主要靠load
我們先來看一個基本的組件
<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>
這里和Element ui不同的是 Element ui的樹形load一進來就會觸發(fā)一次
你可以通過load來加載根目錄的數(shù)據(jù)
但TDesign是只有點擊父節(jié)點才會觸發(fā) 一進來是不會觸發(fā)的
所以 第一級的數(shù)據(jù) 你要自己想辦法弄給樹形綁定的 data
像這里 我就直接將數(shù)據(jù)寫給了items
如果是請求數(shù)據(jù) 你就要在生命周期里將第一級賦值給 data綁定的屬性
然后我們運行項目
然后我們點擊 這就會觸發(fā) load 帶出下面層級的數(shù)據(jù)
我這里是直接無腦返回了文章來源：http://www.zghlxwxcb.cn/news/detail-696766.html
[
{
label: '3',
children: false,
},
];
的數(shù)據(jù)結(jié)構(gòu) 實際中 肯定還是要根據(jù)父id來的
然后呢 這個children就是來控制是否有子集的
你賦值true 他就會顯示前面可以展開的那個箭頭
設(shè)置false 表示沒有子集 就沒有這個箭頭了
文章來源地址http://www.zghlxwxcb.cn/news/detail-696766.html
到了這里，關(guān)于vue2中實現(xiàn) TDesign 樹形懶加載的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
