Как оптимизировать таблицу во vue.js?

Question

[Sergefront]

имеется большая проблема с оптимизацией рядов таблиц которые выводятся в цикле v-for, элементов очень много и производительность слишком сильно падает, я пробовал такие плагины как vue-virtual-scroller но он ломает структуру таблицы которая принципиально важна и обойти это не получается так как плагин оборачивает контент тегом div и так или иначе портит структуру, я зашел в тупик
вот отрывок кода

<tbody>
<tr v-for="(item, index) in getVerticalDuplicates.slice(1)" :key="index">
<td width="166" style="max-width: 166px;" class="fixed-column">
{{ item && item.label ? item.label : '' }}
</td>
<td width="278" style="max-width: 278px;" class="dup-column" :class="{'hover-state': field.hoverState, 'blocked-state': field.value.notDuplicate, 'error-field': isError && hasError(item)}"
v-for="(field, indexField) in item.values" :id="`dup_${field.dupId}_td`" :key="indexField"
@mouseover="addHoverState(field.dupId)"
 @mouseleave="removeHoverState(field.dupId)">
<form>
<DuplicateField :item="field" />
</form>
</td>
</tr>
</tbody>

Comments

[Сергей Сергей]

Это стилизация?

[LJ322]

Подгружать/добавлять данные при скролле не вариант?

[Антон Антон]

зачем проверки при рендере label?
Затем нужно убрать @mouseover и @mouseleave сделать целиком на css - жить сразу станет легче. потом понять, зачем тут :id?
Потом можно уже переходить к реализации virtual scroll (для собственного развития) или взять готовое по поиску vue virtual scroll table например https://github.com/ntma/vue-virtual-scroll-table