Компонент v-data-table используется для отображения данных в виде таблицы. Особенности включают сортировку, поиск, разбиение на страницы, встроенное редактирование, всплывающие подсказки и выбор строк.

Применение

The standard data-table will by default render your data as simple rows.

API

Примеры

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

Выбираемые строки позволяют выполнять действие над определёнными и всеми строками.

Grouped rows

Using the group-by and group-desc props you can group rows on an item property. The show-group-by prop will show a group button in the default header.

Sort on multiple columns

Using the multi-sort prop will enable you to sort on multiple columns at the same time. When enabled, you can pass arrays to both sort-by and sort-desc to programmatically control the sorting, instead of single values.

Поиск в пользовательском слоте без результатов

В таблице данных содержится подсказка search, которая позволяет фильтровать ваши данные.

Таблицы без заголовка

Настройка hide-headers prop создаёт таблицу без заголовка.

Loading state

You can use the loading prop to indicate that data in the table is currently loading. If there is no data in the table, a loading message will also be displayed. This message can be customized using the loading-text prop or the loading slot.

Dense

Using the dense prop you are able to give your data tables an alternate style.

Slots

The v-data-table provides a large number of slots for customizing the table. This example showcases some of these slots and what you can do withe each.

Slot: expand

Компонент v-data-table также поддерживает расширяемые строки, используя слот expand. Вы можете использовать expand чтобы предотвратить закрытие развёрнутых строк при нажатии на другую строку.

Custom filtering

You can override the default filtering used with search prop by supplying a function to the custom-filter prop. If you need to customize the filtering of a specific column, you can supply a function to the filter property on header items. The signature is (value: any, search: string | null, item: any) => boolean. This function will always be run even if search prop has not been provided. Thus you need to make sure to exit early with a value of true if filter should not be applied.

Customizing default header

You can use the dynamic slots header.column.<name> to customize only certain columns. <name> is the name of the value property in the corresponding header item sent to headers.

Customizing default rows

You can use the dynamic slots item.column.<name> to customize only certain columns. <name> is the name of the value property in the corresponding header item sent to headers. So to customize the calories column we're using the item.column.calories slot.

Внешняя разбивка на страницы

Пагинация может управляться извне с помощью pagination. Помните, что вы должны применять модификатор .sync.

Внешняя сортировка

Сортировка также может управляться извне с помощью pagination. Помните, что вы должны применять модификатор .sync. Вы также можете использовать prop (свойство), чтобы установить отсортированный по умолчанию столбец.

Разбиение на страницы и сортировка на стороне сервера

Если вы загружаете данные из бэкэнд и хотите разбивать страницы и сортировать результаты перед их отображением, вы можете использовать опцию «total-items». Определение этого свойства отключит встроенную сортировку и разбивку на страницы, и вместо этого вам придётся использовать prop pagination для отслеживания изменений. Используйте loading для отображения индикатора выполнения при получении данных.

Inline Editing

The v-edit-dialog component is used for inline-editing within data tables. You can block closing the dialog when clicked outside by adding the persistent prop.

CRUD действия

Таблица с действиями CRUD с использованием компонента v-dialog для редактирования каждой строки

Edit this page | language on Github
Vuetify
МагазинFor Enterprise