Data iterator Component

数据迭代器

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

表格每行的数组（将item翻译为条目）

名称

light

默认值

false

类型

boolean

应用明亮主题变体

名称

must-sort

默认值

false

类型

boolean

强制至少一列总是被排序的，而不是在升序（sorted ascending）/降序（sorted descending）/不排序（unsorted）的状态之间切换

名称

next-icon

默认值

'$vuetify.icons.next'

类型

string

Components.DataIterator.

名称

no-data-text

默认值

'$vuetify.noDataText'

类型

string

当没有数据时显示的文本

名称

no-results-text

默认值

'$vuetify.dataIterator.noResultsText'

类型

string

没有筛选结果时显示的文本

名称

pagination.sync

默认值

类型

object

用于控制数据表外部的分页和排序，也可以用来设置默认的排序列。

{
  descending: boolean",
  page: number",
  rowsPerPage: number // -1 for All",
  sortBy: string",
  totalItems: number"
}

名称

prev-icon

默认值

'$vuetify.icons.prev'

类型

string

Components.DataIterator.

名称

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

添加标题行选择所有复选框，可以是指定将那种颜色应用于按钮的字符串，也可以是布尔值（使用默认颜色）。

名称

total-items

默认值

undefined

类型

number

手动设置项目的总数，就可以禁用内置排序和分页，与分页属性一起使用，以启用服务端排序和分页。

名称

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.

Up Next

Edit this page | language on Github

— Contribution Guide