Тормозит анимация hover эффекта на большом количестве элементов
Есть таблица которая состоит из двух таблиц поэтому css не получиться сделать. При наведении на row я передаю его id, а затем начинаю поиск этого id в массиве rows а когда нахожу ставлю isHover: true этому элементу. Если элементов 100 то всё работает плавно, но если больше 300 то уже задержка в 1 - 2 секунды hover эффекта когда наводим на элемент. Как можно оптимизировать поиск по элемента, возможно разбить массив на 2 массива или как правильно сделать? На проэкте использую Vue поэтому делаю коммит с компонента this.CHANGE_HOVER_LEAD({ value: false/true, id: 123123 });а затем делаю поиск в mutations уже:
CHANGE_HOVER_LEAD: (state, data) => {
state.rows.find((item) => (item.id === data.id ? (item.isHover = data.value) : null));
},
Ответы (1 шт):
Нужно избегать поиска больше чем по 100 элементов, чтобы не тормозило, иначе никак. Ищите другой способ. Css, либо селекторы по data-attribute