Data table
Компонент v-data-table используется для отображения данных в виде таблицы. Особенности включают сортировку, поиск, разбиение на страницы, встроенное редактирование, всплывающие подсказки и выбор строк.
Применение
The standard data-table contains data with no additional functionality. You can opt out of displaying table actions that allow you to control the pagination of information with the hide-actions prop.
API
Фильтр пользовательского поиска
Пользовательский сортировочный фильтр
Применяет тёмный вариант темы
Отключить сортировку по умолчанию при первоначальном рендеринге
Обозначает таблицу как содержащую строки, которые могут расширяться
Функция, используемая для фильтрации элементов
Components.DataTables.
При использовании объекта текстовое значение для заголовка
Массив объектов, каждый из которых описывает столбец заголовка. См. Пример ниже для определения всех свойств.
{
text: string",
value: string",
align: 'left' | 'center' | 'right'",
sortable: boolean",
class: string[] | string",
width: string"
}Components.DataTables.
Скрыть действия таблицы
Скрыть заголовки таблиц
Поле в элементе объекта, которое обозначает уникальный ключ
Массив строк таблицы
Применяет светлый вариант темы
Отображение линейного прогресса бара. Может быть либо строкой, которая указывает, какой цвет применяется к индикатору выполнения (любой цвет или цвет темы - primary, secondary, success, info, warning, error) или Boolean, который использует компонент color (установленное color свойство - если он поддерживается компонентом) или основной цвет
Заставляет по меньшей мере один столбец всегда сортироваться вместо переключения между отсортированным по возрастанию / отсортированным нисходящим / несортированным состоянием
Добавьте значок к компоненту, используя тот же синтаксис, что и v-icon
Отображать текст, когда нет данных
Отображать текст, если нет отфильтрованных результатов
Used to control pagination and sorting from outside the data table. Can also be used to set default sorted column
{
descending: boolean",
page: number",
rowsPerPage: number // -1 for All",
sortBy: string",
totalItems: number"
}Подключите иконку к компоненту, используя тот же синтаксис, что и v-icon
Значения по умолчанию для раскрывающегося списка строк на странице
Строки по умолчанию для каждой страницы
Модель поиска для фильтрации результатов
Добавляет флажок в строке заголовка. Может быть либо String, который указывает, какой цвет применяется к кнопке, либо логический (который использует цвет по умолчанию)
Используйте пользовательскую иконку сортировки, используя тот же синтаксис, что и v-icon
Вручную задаёт общее количество элементов строки, что отключает встроенную сортировку и разбиение на страницы. Используется вместе с prop для разбивки на страницы, чтобы разрешить сортировку и разбиение на страницы на стороне сервера
Выбранные элементы строки
Примеры
Slot: no-data
Слот no-data может отображать пользовательский HTML, когда нет данных.
Slot: элементы и заголовки
Слоты items и headers могут принимать либо коллекцию тегов td/th , либо если вы хотите управлять всей строкой, тегом tr .
Slot: headerCell (заголовок ячейки)
Если вы хотите применить некоторую общую разметку или эффект для каждой из ячеек заголовка, вы можете использовать слот headerCell. В этом примере используется для применения всплывающей подсказки к каждому заголовку.
Slot: progress
Существует также progress, когда вы хотите настроить отображение состояния таблицы loading. По умолчанию это indeterminate v-progress-linear
Slot: footer
Существует также слот footer, когда вы хотите добавить дополнительную функциональность в таблицы, например, для фильтрации столбцов или поиска.
Slot: expand
Компонент v-data-table также поддерживает расширяемые строки, используя слот expand. Вы можете использовать expand чтобы предотвратить закрытие развёрнутых строк при нажатии на другую строку.
Slot: page-text
Вы можете настроить текст страницы, отображая диапазон и общие элементы, используя слот page-text.
Выбираемые строки
Выбираемые строки позволяют выполнять действие над определёнными и всеми строками.
Поиск в пользовательском слоте без результатов
В таблице данных содержится подсказка search, которая позволяет фильтровать ваши данные.
Пользовательские значки
Значки предыдущие/следующие и значок сортировки можно настроить с помощью prev-icon, next-icon и sort-icon .
Внешняя разбивка на страницы
Пагинация может управляться извне с помощью pagination. Помните, что вы должны применять модификатор .sync.
Внешняя сортировка
Сортировка также может управляться извне с помощью pagination. Помните, что вы должны применять модификатор .sync. Вы также можете использовать prop (свойство), чтобы установить отсортированный по умолчанию столбец.
Разбиение на страницы и сортировка на стороне сервера
Если вы загружаете данные из бэкэнд и хотите разбивать страницы и сортировать результаты перед их отображением, вы можете использовать опцию «total-items». Определение этого свойства отключит встроенную сортировку и разбивку на страницы, и вместо этого вам придётся использовать prop pagination для отслеживания изменений. Используйте loading для отображения индикатора выполнения при получении данных.
Таблицы без заголовка
Настройка hide-headers prop создаёт таблицу без заголовка.
Встроенное редактирование
Компонент v-edit-dialog используется для встроенного редактирования в таблицах. Вы можете заблокировать закрытие диалогового окна при нажатии на него, добавив persistent prop.
CRUD действия
Таблица с действиями CRUD с использованием компонента v-dialog для редактирования каждой строки