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

Компонент 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

Имя

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

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

Имя

По умолчанию

undefined

Тип

any

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

Имя

select-all

По умолчанию

undefined

Тип

boolean | string

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

Имя

total-items

По умолчанию

undefined

Тип

number

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

Имя

value

По умолчанию

[]

Тип

array

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