Переключение между табличным и списковым представлением в Vue.js

Представляйте любой массив данных и переключайтесь между визуализациями

Vue.js — это простой в изучении, быстрый, легковесный и очень перспективный фреймворк.

В данной статье я расскажу о создании Vue приложения для представления текстовых данных из массива и изменения их визуализации (табличный и списковый вид).

Конечный результат доступен в репозитории.

Первые шаги

Для начала создадим три новых файла:

  • index.html
  • app.js
  • style.css

В файле index.html пропишем таблицу стилей, JavaScript файл и, конечно же, Vue.js:

Теперь придумайте дизайн приложения:

В нашем приложении будет следующее:

  • Кнопка для переключения между табличным и списковым представлением.
  • Кнопка для переключения между массивами данных. Так вы показываете, что приложение может отображать различные коллекции.
  • Стандартный табличный вид. Первая строка — название столбца. Каждый элемент размещается в отдельной строке.
  • Списковое представление: каждый элемент становится частью вертикальной коллекции со своим изображением.

Табличное представление без Vue.js

Реализация табличного вида без Vue.js выглядит так:

Как видите, я не пользовался тегом table, а ограничился только div. Куда удобнее реализовать смену представлений через css:

На что обратить внимание:

  • grid-wrapper, display: table
  • grid-row, display: table-row

Выглядит примерно так:

Списковое представление без Vue.js

Списковое представление без Vue.js выглядит вот так:

Этот стиль очень простой и представляет собой сочетание display: grid с flexbox:

И получается вот это:

Интеграция Vue.js

Объект для представления выглядит примерно так:

Обратите внимание, что в нем есть два массива:

  • columns с перечнем (именами) свойств для отображения;
  • data — массив объектов со свойствами из columns.

Настало время реализовать наше приложение в Vue:

У нас получилось очень простое приложение:

  • isGridView — свойство для отображения/сокрытия табличного или спискового представления макета.
  • isBookData — свойство для изменения представляемых данных. В рабочей версии оно не понадобится, а здесь используется для обучающих целей.
  • Все тестовые данные есть в репозитории.

Самое интересное здесь — это структура HTML, которая представляет собой сочетание следующих элементов:

  • v-bind:class для переключения списковых/табличных CSS классов в зависимости от значения isGridViewCondition
  • v-for для отображения значений массивов и названий столбцов;
  • v-if — для сокрытия/отображения макетов в зависимости от заданного представления.

А вот и конечный результат:

Весь код можно найти в репозитории.

Читайте также:

Читайте нас в Телеграмме: https://t.me/nuancesprog и ВК: https://vk.com/nuancesprog


NOP::Nuances of programming

Перевод и адаптация статей в сфере IT

Артур Хайбуллин

Written by

NOP::Nuances of programming

Перевод и адаптация статей в сфере IT

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade