Q-Tree - 展开和折叠节点非常慢

Question

我有一个加载了大量数据的 q 树（> 1000 个节点，嵌套 5 层或更多层）。它加载得很好，但是当我执行 时expandAll()，一切都变得非常非常慢。

尝试了以下方法，它得到了一些改进，但仍然很慢：

• 深度冷冻物体
• 使用q-virtual-scroll（不确定这是否正确完成，因为它只支持itemsand tables）
• duration将prop设置为1
• no-connectors使用道具移除连接器
• 禁用QSlideTransition（我QTree.js内部修改） - 帮助很大

所以在调试过程中，我注意到以下几点：

• 当尝试展开/折叠节点时，会识别单击，但 Quasar Q-Tree 会重新渲染整个树（每次单击节点时都会迭代整个树 - 由于节点数据庞大，这需要一段时间 __getChildren()）__getNode()
  • 因此，为了实现我想要的（跳过/不要重复地重新迭代 和__getChildren()）__getNode()- 我尝试将之前渲染的组件保存在__getNode()下面的代码中。但是这样一来，单击的节点就不再扩展了——知道如何才能实现我想要的吗？如果可能的话？

__getNode (h, node) {
   // Check if we have a pre-saved rendered output, return it if so
   if (this.outputArray?.[node?.nodeId]) {
      return this.outputArray[node.nodeId]
   }

   // ... a chunk of code goes here ...

   // Save the rendered output in this.output
   this.output = h('div', {
        key,
        staticClass: 'q-tree__node relative-position',
        class: { 'q-tree__node--parent': isParent, 'q-tree__node--child': !isParent }
      }, [
        h('div', {
        // ... codes codes codes ...
        }, [
        // ... codes codes codes ...
        ]
     ]
   )

   // Save the rendered output for re-use later
   this.outputArray[node.nodeId] = {}
   this.outputArray[node.nodeId] = {...this.output}
   return this.output
}

这是我的树，供参考： <q-tree :nodes="simple" node-key="nodeId" ref="tree" :duration="1" />

我也在考虑使用延迟加载，但不知道如何去做，因为该expandAll()功能是必须具备的。

以下是 CodePen 示例： https://codepen.io/keechan/pen/zYomMyR

要查看最慢的树，请单击Expand All按钮（等待一段时间以使其完成展开），然后尝试折叠/展开不同的节点。注意延迟。树对象只是一个示例 - 在实际情况中，它是基于 json/xml 文件的内容构建的。

所以这里有两个问题：

• ExpandAll() 非常慢（当我禁用时解决QSlideTransition）
• 当所有节点都展开时，展开/折叠节点太慢/延迟。

帮助！！！提前致谢！