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

v-data-table
Имя
custom-filter
По умолчанию
(items: object[], search: string, filter: Filter): object[]
Тип
function

Фильтр пользовательского поиска

Имя
custom-sort
По умолчанию
(items: object[], index: number, isDescending: boolean): object[]
Тип
function

Пользовательский сортировочный фильтр

Имя
dark
По умолчанию
false
Тип
boolean

Применяет тёмный вариант темы

Имя
disable-initial-sort
По умолчанию
false
Тип
boolean

Отключить сортировку по умолчанию при первоначальном рендеринге

Имя
expand
По умолчанию
false
Тип
boolean

Обозначает таблицу как содержащую строки, которые могут расширяться

Имя
filter
По умолчанию
(val: object, search: string): boolean
Тип
function

Функция, используемая для фильтрации элементов

Имя
header-key New in — v1.2
По умолчанию
undefined
Тип
string

Components.DataTables.

Имя
header-text
По умолчанию
'text'
Тип
string

При использовании объекта текстовое значение для заголовка

Имя
headers
По умолчанию
[]
Тип
array

Массив объектов, каждый из которых описывает столбец заголовка. См. Пример ниже для определения всех свойств.

{
  text: string",
  value: string",
  align: 'left' | 'center' | 'right'",
  sortable: boolean",
  class: string[] | string",
  width: string"
}
Имя
headers-length
По умолчанию
undefined
Тип
number

Components.DataTables.

Имя
hide-actions
По умолчанию
false
Тип
boolean

Скрыть действия таблицы

Имя
hide-headers
По умолчанию
false
Тип
boolean

Скрыть заголовки таблиц

Имя
item-key
По умолчанию
'id'
Тип
string

Поле в элементе объекта, которое обозначает уникальный ключ

Имя
items
По умолчанию
[]
Тип
array

Массив строк таблицы

Имя
light
По умолчанию
false
Тип
boolean

Применяет светлый вариант темы

Имя
loading
По умолчанию
false
Тип
boolean | string

Отображение линейного прогресса бара. Может быть либо строкой, которая указывает, какой цвет применяется к индикатору выполнения (любой цвет или цвет темы - primary, secondary, success, info, warning, error) или Boolean, который использует компонент color (установленное color свойство - если он поддерживается компонентом) или основной цвет

Имя
must-sort
По умолчанию
false
Тип
boolean

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

Имя
next-icon
По умолчанию
'$vuetify.icons.next'
Тип
string

Добавьте значок к компоненту, используя тот же синтаксис, что и v-icon

Имя
no-data-text
По умолчанию
'$vuetify.noDataText'
Тип
string

Отображать текст, когда нет данных

Имя
no-results-text
По умолчанию
'$vuetify.dataIterator.noResultsText'
Тип
string

Отображать текст, если нет отфильтрованных результатов

Имя
pagination.sync
По умолчанию
Тип
object

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"
}
Имя
prev-icon
По умолчанию
'$vuetify.icons.prev'
Тип
string

Подключите иконку к компоненту, используя тот же синтаксис, что и v-icon

Имя
rows-per-page-items
По умолчанию
[5,10,25,{"text":"$vuetify.dataIterator.rowsPerPageAll","value":-1}]
Тип
array

Значения по умолчанию для раскрывающегося списка строк на странице

Имя
rows-per-page-text
По умолчанию
'$vuetify.dataTable.rowsPerPageText'
Тип
string

Строки по умолчанию для каждой страницы

Имя
search
По умолчанию
undefined
Тип
any

Модель поиска для фильтрации результатов

Имя
select-all
По умолчанию
undefined
Тип
boolean | string

Добавляет флажок в строке заголовка. Может быть либо String, который указывает, какой цвет применяется к кнопке, либо логический (который использует цвет по умолчанию)

Имя
sort-icon
По умолчанию
'$vuetify.icons.sort'
Тип
string

Используйте пользовательскую иконку сортировки, используя тот же синтаксис, что и v-icon

Имя
total-items
По умолчанию
undefined
Тип
number

Вручную задаёт общее количество элементов строки, что отключает встроенную сортировку и разбиение на страницы. Используется вместе с prop для разбивки на страницы, чтобы разрешить сортировку и разбиение на страницы на стороне сервера

Имя
value
По умолчанию
[]
Тип
array

Выбранные элементы строки

Примеры

Slot: no-data

Слот no-data может отображать пользовательский HTML, когда нет данных.

Slot: элементы и заголовки

Слоты items и headers могут принимать либо коллекцию тегов td/th , либо если вы хотите управлять всей строкой, тегом tr .

Slot: headerCell (заголовок ячейки)

Если вы хотите применить некоторую общую разметку или эффект для каждой из ячеек заголовка, вы можете использовать слот headerCell. В этом примере используется для применения всплывающей подсказки к каждому заголовку.

Slot: progress

Существует также progress, когда вы хотите настроить отображение состояния таблицы loading. По умолчанию это indeterminate v-progress-linear

Существует также слот 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 для редактирования каждой строки

Edit this page | language on Github