Просто бек не я писал

Парни, дайте совет.
Есть данные в древовидной структуре
(около 100-150 тыс. объектов в массиве)
Рисуются через виртуал скролл с возможностью скрытия/открытия ветвей и чекбоксами.
Реализовал с помощью построения карты дерева, где в каждом узле есть ссылки на всех потомков
(чтобы каждый раз не обходить рекурсивно)
На 10-15 тыс. полёт нормальный но при увеличении объема начинает притормаживать и подвисать.
Хочу встроить динамическую подгрузку данных в виртуал скролл но с деревом это сделать не просто.

Если кто то реализовывал нечто подобное, прошу намекнуть в какую сторону думать т.к. сейчас в голове несколько вариантов и я не знаю по какому идти.
Сейчас думаю забирать например по 1000 объектов и вычислять дельту при достижении которой будет подгрузка с бека,
Но что делать при скрытии узла? Думаю держать в каждой ноде некий children_count и увеличивать offset на него.

С другой стороны, 150 тыс объектов не так уж и много и можно впринципе
с ними работать отключив реактивность и заоптимизировать алгоритмы, навесить web-worker'ов и т.п.

Если кто то сталкивался, прошу дать совет) Спасибо!

Подскажите, как в компоненте v-data-table добавить действие, при нажатии на заголовок таблицы (лучше не на сам заголовок, а добавить рядом кнопочку).

посмотри на слот для хидера, там наверняка можно показать название колонки и рядом кнопку

можно добавить кнопку через header-слот и навесить на нее обработчик

Могу ли я использовать фильтры, которые создаю в компоненте, в самом теле <script> а не <template>?

Спасибо, будем искать :)

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

Уже заметил, но сортировка мне не важна, а так, прикольно. Хотя просто кнопочка рядом - было бы лучше :(

ну вполне это реализуемо, пробуй)

там есть слот top. В него можно вставить заголовок таблицы с обработчиком. В api доке всё есть)

всем привет

есть две переменнные change, default
передаю данные в переменные таким образом

this.change = [1,2,3]
this.default = […this.change]

но меняя данные в change они меняются и в default

как сделать что бы default не ссылался на change

Ну вот, было обещано. что все свойства слетят, а они, гады, не слетели :(
в итоге, при нажатии кнопки - и действие и сортировка происходит, (сортировку решил оставить, осталось отвязать ее от кнопки)

top - он используется, чуть для другого.  В доке нет примера слота header - он в данном случае интереснее.... :)

я так понимаю, ты в целом слот header ко всем header применяешь одну и ту же кнопку да?

я добавил слот:
     <template v-slot:item.isExist="{ item }">
         <v-simple-checkbox v-model="item.isExist" disabled>  </v-simple-checkbox>
     </template>

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

Надо конечно посмотреть как оно вставляется, если друг в друга, то возможно поможет @click.stop (отменит распространение действия обработчика вниз по древу элементов)

стоп останавливает вверх же

не?