Итератор данных

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

Применение

The v-data-iterator allows you to customize exactly how to display your data. In this example we are using a grid list with cards. We can use the content-tag prop (along with content-class and content-props) to specify what the wrapper element around the items should look like.

API

v-data-iterator
Имя
content-class
По умолчанию
undefined
Тип
string

Применяет пользовательский класс к элементу обёртки вокруг элементов

Имя
content-props
По умолчанию
undefined
Тип
object

Применяет пользовательские свойства к обёрточному элементу вокруг элементов

Имя
content-tag
По умолчанию
'div'
Тип
string

Укажите, какой тег следует использовать для элемента оболочки вокруг элементов

Имя
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

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

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

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

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

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

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

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

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

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

Имя
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.dataIterator.rowsPerPageText'
Тип
string

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

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

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

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

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

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

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

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

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

Примеры

Slots

The v-data-iterator has both a header and footer slot for adding extra content

Expand

v-data-iterator can leverage the power of the expand prop and props.expanded inside the item slot to control the visibility of item data.

Edit this page | language on Github