Каков наилучший способ визуализации v-дерева Vuetify с очень большим количеством узлов? - PullRequest
1 голос
/ 01 ноября 2019

Я использую Vuetify Framework для отображения складываемого компонента Treeview :

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

И он работает почти так, как я ожидал, но проблема в том, что дочерние элементы могут содержать до нескольких сотен узлов - и даже если я загружаю их более или менее без усилий, они обрабатываются браузером слишком медленно при каждом открытии родительского узла.

В настоящее времяПользовательский интерфейс просто зависает на некоторое время, когда пользователь щелкает узел со слишком большим количеством дочерних элементов. Я хочу, чтобы во время рендеринга узлов отображался загрузчик или спиннер, но поскольку в Vuetify Treeview нет события обратного вызова для завершения рендеринга (что я обнаружил, было только для открытия и асинхронных вызовов), я не могу установить обратный вызовсобытие для этого.

1 Ответ

0 голосов
/ 01 ноября 2019

Лучший способ сделать это - динамически загрузить дочерние элементы с помощью load-children

Функция, используемая при динамической загрузке дочерних элементов. Если это свойство установлено, то предоставленная функция будет запущена, если развернуть элемент, имеющий свойство item-children, которое является пустым массивом. Поддерживает возврат Обещания.

vuetify имеет пример этого на своей странице: https://vuetifyjs.com/en/components/treeview/#async-items

...