渲染具有大量节点的 Vuetify v-treeview 的最佳方法是啥？

Posted 2023-02-23

【中文标题】渲染具有大量节点的 Vuetify v-treeview 的最佳方法是啥？

【英文标题】：What is the best way to render a Vuetify v-treeview with a very large number of nodes?渲染具有大量节点的 Vuetify v-treeview 的最佳方法是什么？

【发布时间】：2020-02-27 13:10:08

【问题描述】：

我正在使用 Vuetify 框架显示可折叠的Treeview component：

<v-treeview
 :items="items"
 :open-on-click="false"
 :open-all="false"
 :multiple-active="false"
 hoverable
 :active-class="'text_bold'"
 return-object
 activatable
>

它的工作原理与我预期的差不多，但问题是 items 的子节点可以包含多达数百个节点 - 即使我或多或少地轻松加载它们，每次打开父节点时浏览器渲染的速度太慢。

当前，当用户单击具有太多子节点的节点时，UI 会冻结一段时间。我想要的是在渲染节点时显示加载器或微调器 - 但由于 Vuetify Treeview 中没有用于完成渲染的回调事件（我发现仅用于打开和异步调用），我无法设置回调事件。

【参考方案1】：

最好的办法是用load-children动态加载孩子

动态加载子项时使用的函数。如果这个道具是 设置，然后如果扩展一个项目，则提供的函数将运行 有一个 item-children 属性是一个空数组。支持 返回一个 Promise。

vuetify 在他们的页面上有一个这样的例子：https://vuetifyjs.com/en/components/treeview/#async-items