某个节点下的数据太多时显示为空白

[xtuer]

Bug 描述 某个节点下的数据太多时显示为空白，如图

复现步骤 请描述复现步骤，并且提供最小可复现示例（CodeSandbox, CodePen 链接等）

期望表现

实际表现 数据量太大时树的节点显示为空。

组件版本

• Vue: Vue 3.4
• @wsfe/vue-tree: ^3.2.0
• 其他可帮助复现的 npm 包名称及版本

额外信息 其他要补充的信息

[xtuer]

目前我使用分组显示暂时解决了这个问题 (分组时也是展开分组节点时创建分组下的节点，不能一次性把所有分组下的节点创建，否则也是显示不出来)

[941477276]

我也遇到了这个问题，我司有客户在有一节点下有15万个子节点，后续可能还会增多，希望作者能解决这一难题

[ChuChencheng]

有复现的示例么

[xtuer]

可以使用下面的例子测试一下。 点击 (2) 朝阳 动态加载子节点。

修改 while (sn++ < 108999) 增加树的节点。

<template>
    <main style="height: 500px">
        <Vtree ref="tree" :load="loadNodes" :render="nodeRender"/>
    </main>
</template>

<script setup lang="jsx">
import { ref, onMounted } from 'vue'
import Vtree from '@wsfe/vue-tree'
import '@wsfe/vue-tree/style.css'

/*
 主要知识点:
 1. 创建树的 ref，用于调用其 API。
 2. Node 数据结构: { id, title, children }
 3. Node render: 使用 JSX 定义节点的样式。
 4. 异步加载节点数据 (点击箭头展开或者单击节点)。
 5. 改变节点状态，更新节点样式。
 */

// [1] 创建树的 ref，用于调用其 API。
const tree = ref(null)
let treeId = 4;

// [2] Node 数据结构: { id, title, children }
const data = [
    {
        id: 1,
        title: '北京',
        children: [
            { id: 2, title: '朝阳', children: [] },
            { id: 3, title: '大兴', children: [] },
        ]
    }
]

let sn = 10;

// DOM 挂载好后设置节点数据。
onMounted(() => {
    tree.value.setData(data);
    tree.value.setExpand(1, true);
})

// [3] Node render: 使用 JSX 定义节点的样式。
function nodeRender(node) {
    const classes = [node.unready ? 'unready' : 'ready'];
    return (<div class={ classes }>({ node.id }) { node.title }</div>)
}

// [4] 异步加载节点数据 (点击箭头展开或者单击节点)。
function loadNodes(node, resolve, reject) {
    if (!node) {
        reject();
        return;
    }

    if (node.id === 2) {
        const nodes = [];
        // TODO: 修改这里的值，108999 还能正常显示，118999 就显示不出来了。
        while (sn++ < 108999) {
            nodes.push({ id: sn, title: `title-${sn}`, isLeaf: true });
        }

        resolve(nodes);
    } else {
        node.isLeaf = true;
        reject();
    }
}
</script>

<style>
.unready {
    color: red;
}

.ready {
    color: green;
}

.ctree-tree-node__title_disabled > div {
    color: #aaa;
}
</style>

[ChuChencheng]

超过最大调用栈了，没有把错误抛出来，导致了空白又没报错 看来内部得分批处理 load 给的节点

[ChuChencheng]

Vue3 版本先在 @wsfe/[email protected] 修复了

[xtuer]

Vue3 版本先在 @wsfe/[email protected] 修复了

效果很好，非常感谢。

[ChuChencheng]

@wsfe/ctree v2.4.0 @wsfe/vue-tree v4.0.0