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

时间:2019-11-01 07:46:22

标签: javascript vue.js treeview vue-component vuetify.js

我正在使用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 个答案:

答案 0 :(得分:0)

最好的方法是使用load-children

动态加载子级
  

动态加载子代时使用的函数。如果这个道具是   设置,则如果展开一个   具有一个为空数组的item-children属性。支持   返回一个承诺。

vuetify在其页面上有一个示例:https://vuetifyjs.com/en/components/treeview/#async-items