Closed xtuer closed 3 months ago
目前我使用分组显示暂时解决了这个问题 (分组时也是展开分组节点时创建分组下的节点,不能一次性把所有分组下的节点创建,否则也是显示不出来)
我也遇到了这个问题,我司有客户在有一节点下有15万个子节点,后续可能还会增多,希望作者能解决这一难题
有复现的示例么
可以使用下面的例子测试一下。
点击 (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>
超过最大调用栈了,没有把错误抛出来,导致了空白又没报错 看来内部得分批处理 load 给的节点
Vue3 版本先在 @wsfe/vue-tree@3.2.1 修复了
Vue3 版本先在 @wsfe/vue-tree@3.2.1 修复了
效果很好,非常感谢。
@wsfe/ctree v2.4.0 @wsfe/vue-tree v4.0.0
Bug 描述 某个节点下的数据太多时显示为空白,如图
复现步骤 请描述复现步骤,并且提供最小可复现示例(CodeSandbox, CodePen 链接等)
期望表现
实际表现 数据量太大时树的节点显示为空。
组件版本
额外信息 其他要补充的信息