vue Таблицы

Vue-good-table — плагин VueJS для работы с таблицами

Компактный плагин для Vue.js, который идеально справится сортировкой, пагинацией, фильтрацией данных в таблицах на сайте. Вся реактивность Vue в таблицах!

Предназначение инструмента

Бывает, что есть необходимость работать с объемными данными, которые представлены в виде таблицы HTML. К сожалению, работа с полотном ячеек приносит мало удовольствия. Так, имеет смысл разбить это все на удобные страницы, снабдить заголовки полей возможностью делать сортировку, ну и, конечно же, поиск по записям таблицы.

Ранее, нам на помощь могли прийти jQuery плагины, но время идет и отказываться от реактивности Vue.js просто бессмысленно. Рассматриваемый сегодня плагин отлично справляется со своей задачей

Установка

Инсталлируем плагин через npm:

Далее импортируем в проект:

Пример использования:

Данный код должен привести к виду таблицу, которая находится на превью к данному плагину.

Примечание: vue-good-table также поддерживает динамический <td>шаблоны, где вы диктуете, как отобразить ячейки. Пример:

 

202 просмотров
В поисках шаблона для сайта?