Comments 25
Что делает разработчик, когда сталкивается с проблемой? Идет гуглить.
Неплохо бы сначала подумать, чтобы хотя бы правильный запрос в гугл отправить :)
И парочка вопросов:
1. зачем выводить по 100 строк на 1 страницу, если можно разбить на более мелкую пагинацию и все будет ок?
2. Судя по 14К компонентам, у вас 100 строк и 140 столбцов. Не кажется ли слишком большим число столбцов, и проще/лучше было подумать про «горзинтальную пагинацию» чем грузить все подряд?
3. Не знаю как в Nuxt (не работал с ним), но во Vue есть функциональные компоненты, которые как раз для таких случаев и нужны: внутри ячейки у вас легкий функциональный компонент, который при нажатии на кнопки (видимо удаление, редактирование, добавление) пушат в store информацию и отображается компонент ВНЕ таблицы? Это не поможет с количеством компонентов внутри таблицы, но явно облегчит саму таблицу.
4. Можно было сделать авто-пагинацию, когда доскролил до нижней границы текущей страницы, подгружать автоматом след страницу, когда докрутил до верхней границы пред-страницы
1. Требование заказчика. Каждое из 70 направлений может быть у нашего проекта
2. Я вообще сделал вертикальную пагинацию и возможность отображать вместо 70 направлений только те, которые пришли с проектов. Условно, пришло 25 проектов с 10 суммарно направлениями — ура, 250 элементов
3. В Nuxt всё так же. Кнопки если что показывают всплывающее окно, поэтому так просто это не сделать, но идея хорошая
4. Внутри таблицы Vuetify не получилось это сделать по нормальному. Поэтому второе решение и спасло
ЗЫ: про 140 столбцов. Их 70. Компонентов 14к было, потому что v-lazy генерирует на верхнем уровне 2 компонента (он вроде как как раз функциональный). Вообще элементов 7к: 70 направлений и 100 проектов
2. Я вообще сделал вертикальную пагинацию и возможность отображать вместо 70 направлений только те, которые пришли с проектов. Условно, пришло 25 проектов с 10 суммарно направлениями — ура, 250 элементов
3. В Nuxt всё так же. Кнопки если что показывают всплывающее окно, поэтому так просто это не сделать, но идея хорошая
4. Внутри таблицы Vuetify не получилось это сделать по нормальному. Поэтому второе решение и спасло
ЗЫ: про 140 столбцов. Их 70. Компонентов 14к было, потому что v-lazy генерирует на верхнем уровне 2 компонента (он вроде как как раз функциональный). Вообще элементов 7к: 70 направлений и 100 проектов
1. Странное требование (скорее всего не так сформулировано), но тем не менее вы фактически показываете только ограниченное число элементов (те что входят на страницу) и для конченого пользователя без разницы загружено все 100 элементов, а видит он только 20 или загружено 20 элементов и он эти 20 элементов видит.
2. не понял о чем речь, не хватает контекста, но не суть
3. эээ а в чем проблема? Компонент выводит кнопку, при нажатии вызывается что-то вроде
2. не понял о чем речь, не хватает контекста, но не суть
3. эээ а в чем проблема? Компонент выводит кнопку, при нажатии вызывается что-то вроде
parent.$store.dispatch('viewEditModal', item);. Компонент всплывающего окна находится вне таблице и «слушает» $store. Сеньор помидор в азбуке вкуса должен знать такие простые конструкции :)Странное требование (скорее всего не так сформулировано)
Тут нужно много вдаваться в детали, я этого сделать не могу, не суть важно: «задача поставлена, её надо решить» (с)
не понял о чем речь, не хватает контекста, но не суть
Долго объяснять, да, но в общем пришли не к горизонтальной сортировке, а к снижению кол-ва столбцов, чтобы не показывать то, что не нужно. Это на усмотрение пользователя таблицы, потому что у заказчика есть кейсы, когда ему нужно видеть всё
эээ а в чем проблема
Всё немного сложнее, чем кажется. Дело не в том, что я этого не знаю — я из-за ограничений Vuetify уже писал функциональный компонент с интересной логикой для вывода пунктов меню в List Vuetify (долго рассказывать, но там даже ишью была на гитхабе не решенная с просьбой добавить то, что я делал «вручную» функциональным)
А компоненты всплывающих окон и так лежат отдельно, просто слушают не стор, разумеется, стор добавить не было бы проблемой. Проблема в рендере всяких VButton, VIcon и остальных компонентов, из-за чего это всё и пихалось под плашку «загрузка...» в первом случае и v-lazy во втором. Ни одна из этих кнопок не является инлайн редактированием, а триггерит глобальное (вне элемента) всплывающее окно
Плюс там есть штуки типа множественных действий, которые вместо окна действиями создают формочку или галочку. Задача большая, сроки сжатые. Проблема, собственно, именно в рендере тяжелых компонентов. Ближе всего тут решение Almatyn в комменте неподалеку, когда нужно по нажатию подгружать компонент редактора с кнопочками действия вместо чего-то очень простого, но заказчика такой вариант не устраивает.
4й вариант недавно реализовывал. Тоже жирные таблицы с кучей кастомизации в слотах и тултипами. Создал враппер, закинул в него таблицу и компонент на базе intersection observer и v-progress-linear, который при пересечении эмитил эвент и шла подгрузка следующего чанка данных. Вроде полет нормальный. Ещё и в vue-scroll все это обернул, но таблица должна быть фиксированной высоты (хотя бы в абсолютных величинах).
А не хотите попробовать портировать на Vue автоматическую виртуализацию?
UFO just landed and posted this here
140 столбцов, куча рядов — очень неудачное решение
Я напоминаю, что я переношу уже существующее решение.
Удивляет, что столь тривиальная задача таблица с группировками и сортировками — вынудила вас брать негодный vuetify
Я что, безумец? Эта таблица — лишь малая часть сайта. Выбор Vuetify сильно нам помог в других задачах. Там десятки страниц с кучей функционала. И читайте текст, пожалуйста, я писал, что мне НЕ нужно делать группировки и сортировки, благодаря чему я относительно быстро сделал второе решение.
Например для вашей задачи использование $forceUpdate(), setTimeout, setInterval, $nextTick()
$nextTick — это плохое проектирование? Зачастую при работе с Vuetify, особенно с формами, это использовать нужно, так как, например, прилетает событие input, а Vuetify еще не успел отреагировать на это, от чего спасает $nextTick.
$forceUpdate я ненавижу, во втором решении я от него избавился. Он существовал только ради v-once из-за тормозных таблиц Vuetify, которые даже после рендера чем-то занимались.
UFO just landed and posted this here
А какой-то другой UI-фремворк используйте вместо Vuetify? Или чистый html+css?
Если Вас попросили сделать так-же неудобно как было, тогда конечно
Не шутка =)
Беда с Vuetify, в том что их реализация очень далека от совершенства.
Местами да. Большинство простых задач он решает, но когда углубляешься и делаешь сложные штуки, начинаются беды с фреймворком
если бы я работал с Vuetify, то до сих пор бы не перешел на Vue3, Composition API, TypeScript
Ну мы на Nuxt, поэтому так или иначе не перейдем. Но Typescript это не мешает использовать и на Vue 2
А какой-то другой UI-фремворк используйте вместо Vuetify? Или чистый html+css?
На этом проекте только Vuetify и HTML+CSS, без каких либо UI фреймворков. Я в целом не люблю привязку к UI-фреймворкам, но на этом проекте это стало лучшим решением, потому что у нас нет дизайнера, есть только я, фулстек, и еще один парень, фронтенд.
И это не рабочий проект, а дипломный, поэтому тут важно было обойтись малой кровью, Vuetify много где помог (и добавил костылей тоже, безусловно)
UFO just landed and posted this here
Кроме стилей есть ещё куча всего, что задолбаешься делать руками. Ну, конечно, если времени свободного много — то пожалуйста. Лично я остановился на quasar и пока не жалею.
3 года назад слез с Vuetify и так же остановился на квазар.
Intersection идет из коробки. (https://quasar.dev/vue-components/intersection#introduction). Многие компоненты, где имеются списки так же используют intersection внутри.
Там достаточно неплохая реализация virtual scroll, которую можно использовать с table (аналог datatable) из коробки и в markup table (совсем простая обертка над нативным тегом table)
Не думали сделать рендеринг на canvas?
Перемещение/скролл практически бесплатные, избавление от layout.
Активную ячейку можно сверстать и абсолютно спозиционировать поверх.
Перемещение/скролл практически бесплатные, избавление от layout.
Активную ячейку можно сверстать и абсолютно спозиционировать поверх.
Не думали сделать рендеринг на canvas
Вообще не задумался, кстати. Скорее всего потому, что я пользуюсь канвасом раз в год. Как-то раз делал на нем большой проект (не в Азбуке) и это не было легко и быстро. Идея прикольная
избавление от layout
Как раз наоборот, весь лейаут и даже перенос текста приходится реализовывать вручную.
js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/InfiniteScrolling/Vue/Light
Пробовали? это лучшие таблицы для фронта. Таблицы «all-purpose» фреймворков не вытягивают большие данные.
Пробовали? это лучшие таблицы для фронта. Таблицы «all-purpose» фреймворков не вытягивают большие данные.
Sign up to leave a comment.
Проблемы рендера семи тысяч элементов на Vuetify