Javascript Q-树-扩展和折叠节点非常慢

我有一个q-树，它加载了大量数据（>1000个节点，嵌套了5个或更多级别）。它可以正常加载，但当我执行

expandAll（）

时，一切都变得非常缓慢

尝试了以下方法后，效果有所改善，但仍然很慢：

• 深冷物体
• 使用

  q-virtual-scroll

  （不确定是否正确，因为它只支持

  项和
  表
  ）

• 将

  duration

  prop设置为

  1

• 使用

  无接头拆卸接头

• 禁用

  QSlideTransition

  （我在内部修改了

  QTree.js

  ）非常有帮助

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

• 尝试展开/折叠节点时，可以识别click，但Quasar Q-Tree会重新渲染整个树（每次单击节点时都会迭代整个

  \uu getChildren（）

  和

  \uu getNode（）

  ，这需要一段时间，因为节点数据量很大）
  • 因此，为了实现我想要的（跳过/不要重复地重新迭代

    \uuuu getChildren（）

    和

    \uuu getNode（）

    ），我尝试将先前呈现的组件保存在

    \uu getNode（）

    中，就像下面的代码一样。但是有了这个，点击的节点就不会再扩展了——你知道我怎样才能实现我想要的，如果可能的话

这是我的树，供参考：

我也在考虑使用lazy-load，但不确定如何使用，因为

expandAll（）

功能是必备的

下面是一个示例代码笔：

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

因此，这里有两个问题：

• ExpandAll（）非常慢（在禁用

  QSlideTransition

  时解决）
• 当所有节点都展开时，展开/折叠节点太慢/延迟

---

救命啊！！！提前谢谢

如果您可以创建自己的组件呢。我用你的数据创建了这个代码笔。但它没有

全部展开

。您可以参考此

类星体应用程序扩展qsortabletree

。您可以尝试一下，看看它是否与daa配合良好。它比QTree快。

__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
}