时间戳

首页 > 解决方案 > 渲染具有大量节点的 Vuetify v-treeview 的最佳方法是什么？

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

问题描述

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

<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 中没有用于完成渲染的回调事件（我发现仅用于打开和异步调用），我无法设置回调事件。

标签： javascriptvue.jstreeviewvue-componentvuetify.js

解决方案

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

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

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

推荐阅读