wsfe / vue-tree

使用虚拟列表优化的 Vue 树组件 Vue tree component optimized using virtual list
https://wsfe.github.io/vue-tree/
MIT License
176 stars 32 forks source link

renderNodeAmount 不生效 #62

Closed xtuer closed 1 year ago

xtuer commented 1 year ago

例如 <Vtree ref="tree" :load="loadNodes" :render="nodeRender" :renderNodeAmount="100"/>:

  1. 节点使用动态加载,展开某个节点后 load 的函数中用 resolve([children]) 创建子节点。
  2. 某个节点下有 10000 个节点,发现展开这个节点的时候,10000 个子节点都会生成 DOM,而不是生成 renderNodeAmount + bufferNodeAmount 节点,然后在滚动的时候动态生成 DOM 节点。
  3. 发现这种情况下 <div class="ctree-tree__block-area"><div style="height: 0px"> 中 height 的值一直是 0px,而在线例子 https://wsfe.github.io/vue-tree/ 的 performance 里的这个节点的 height 会变化。

造成虚拟滚动不生效的会不会是动态加载的节点都不能使用虚拟滚动了?

ChuChencheng commented 1 year ago

没有失效啊,这边我限制了渲染 30 个节点,实际 block area 子节点个数 32 个,减去头尾两个撑高度的,刚好是 30 个。 检查一下你的树组件外层的容器是不是没有给一个高度,虚拟列表计算是需要拿到 scroll area 这个 div 的 clientHeight 的。

https://codesandbox.io/p/sandbox/vue-tree-render-node-amount-yyt2v5

image
xtuer commented 1 year ago

没有失效啊,这边我限制了渲染 30 个节点,实际 block area 子节点个数 32 个,减去头尾两个撑高度的,刚好是 30 个。 检查一下你的树组件外层的容器是不是没有给一个高度,虚拟列表计算是需要拿到 scroll area 这个 div 的 clientHeight 的。

https://codesandbox.io/p/sandbox/vue-tree-render-node-amount-yyt2v5

image

问题解决,非常感谢。我直接把 vue-tree 放到最顶层容器里测试,没有设置高度,导致会渲染所有节点,设置高度后就生效了。