v-data-iterator 组件用于显示数据，并将其大部分功能与 v-data-table 组件共享。功能包括排序、搜索、分页和选择。
从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。
v-data-iterator
props
slots
events
sass
name
custom-filtertype
functiondefault
(items: any[], search: string) => any[]description
过滤项目的函数
name
custom-grouptype
functiondefault
(items: any[], groupBy: string[], groupDesc: boolean[]) => Record<string, any[]>description
用于分组项目的函数
name
custom-sorttype
functiondefault
(items: any[], sortBy: string[], sortDesc: boolean[], locale: string, customSorters?: Record<string, compareFn>) => any[]description
用于排序项目的函数
name
darktype
booleandefault
falsedescription
将暗色主题变量应用到组件。你可以在 dark themes 的 Material Design 文档中找到更多有关信息。
name
disable-filteringtype
booleandefault
falsedescription
完全禁用过滤
name
disable-paginationtype
booleandefault
falsedescription
完全禁用分页
name
disable-sorttype
booleandefault
falsedescription
完全禁用排序
name
expandedtype
arraydefault
[]description
扩展项目数组。可以与 .sync 修饰符一起使用
name
footer-propstype
objectdefault
undefineddescription
更多信息请访问 v-data-footer API
name
group-bytype
string | arraydefault
[]description
改变了项目分组时应使用哪个项目属性。目前只支持单一的分组格式。 group 或 ['group']。当使用数组时，只考虑第一个元素。可与 .sync 修改器一起使用。
name
group-desctype
boolean | arraydefault
[]description
更改完成的方向分组。可以与 .sync 修饰器一起使用
name
hide-default-footertype
booleandefault
falsedescription
默认隐藏页脚
name
item-keytype
stringdefault
'id'description
每个项上用作唯一键的属性
name
itemstype
arraydefault
[]description
要显示的项目数组
name
items-per-pagetype
numberdefault
10description
更改每页应可见的项数。可以与 .sync 修饰符一起使用
name
lighttype
booleandefault
falsedescription
为组件设置浅色主题。
name
loadingtype
boolean | stringdefault
undefineddescription
如果为 true 且未提供任何项目，则将显示加载文本
name
loading-texttype
stringdefault
'$vuetify.dataIterator.loadingText'description
当 loading 为 true 且未提供任何物品时显示的文本
name
localetype
stringdefault
'en-US'description
设置组件的语言环境。 用于翻译内部文本字符串。
name
mobile-breakpointtype
number | stringdefault
600description
name
multi-sorttype
booleandefault
falsedescription
如果为 true，则可以对多个属性进行排序
name
must-sorttype
booleandefault
falsedescription
如果为 true，则不能禁用排序，它将始终在升序和降序之间切换
name
no-data-texttype
stringdefault
'$vuetify.noDataText'description
未向组件提供任何项目时显示的文本
name
no-results-texttype
stringdefault
'$vuetify.dataIterator.noResultsText'description
使用 search 属性时显示的文本，但没有结果
name
optionstype
DataOptionsdefault
{}description
选项的组合对象。定义见下面的例子。可与 .sync 修改器一起使用。
example
{
page: number
itemsPerPage: number
sortBy: string[]
sortDesc: boolean[]
groupBy: string[]
groupDesc: boolean[]
multiSort: boolean
mustSort: boolean
}name
pagetype
numberdefault
1description
更改显示的项目页面。 可以和 .sync 修饰符一起使用
name
searchtype
stringdefault
undefineddescription
用于过滤项目的文本输入
name
selectable-keytype
stringdefault
'isSelectable'description
每个项目上的属性，用于确定其是否可选择。
name
server-items-lengthtype
numberdefault
-1description
仅在服务器提供数据时使用。 应该设置为服务器上可用项目的总数，以便分页可以正常工作
name
single-expandtype
booleandefault
falsedescription
将扩展模式更改为单个扩展
name
single-selecttype
booleandefault
falsedescription
将选择模式更改为单选
name
sort-bytype
string | arraydefault
[]description
更改应该用于排序顺序的项目属性（或属性）。可以与 .sync 修饰符一起使用
name
sort-desctype
boolean | arraydefault
[]description
改变排序的方向。可以与 .sync 修饰器一起使用
name
valuetype
arraydefault
[]description
用于控制选定的行
name
defaultdescription
默认插槽。用它渲染您的项目
props
{
items: any[]
pagination: {
page: number
itemsPerPage: number
pageStart: number
pageStop: number
pageCount: number
itemsLength: number
},
options: {
page: number
itemsPerPage: number
sortBy: string[]
sortDesc: boolean[]
groupBy: string[]
groupDesc: boolean[]
multiSort: boolean
mustSort: boolean
},
groupedItems: Record<string, any[]>
updateOptions: (obj: any) => void
sort: (value: string) => void
group: (value: string) => void
isSelected: (item: any) => boolean
select: (item: any, value: boolean) => void
isExpanded: (item: any) => boolean
expand: (item: any, value: boolean) => void
}name
footerdescription
在项目下方定义页脚
props
{
items: any[]
pagination: {
page: number
itemsPerPage: number
pageStart: number
pageStop: number
pageCount: number
itemsLength: number
},
options: {
page: number
itemsPerPage: number
sortBy: string[]
sortDesc: boolean[]
groupBy: string[]
groupDesc: boolean[]
multiSort: boolean
mustSort: boolean
},
groupedItems: Record<string, any[]>
updateOptions: (obj: any) => void
sort: (value: string) => void
group: (value: string) => void
}name
footer.page-textdescription
该插槽将转发到默认页脚。 有关更多信息，请参见 v-data-footer API。
props
{
pageStart: number
pageStop: number
itemsLength: number
}name
headerdescription
props
{
items: any[]
pagination: {
page: number
itemsPerPage: number
pageStart: number
pageStop: number
pageCount: number
itemsLength: number
},
options: {
page: number
itemsPerPage: number
sortBy: string[]
sortDesc: boolean[]
groupBy: string[]
groupDesc: boolean[]
multiSort: boolean
mustSort: boolean
},
groupedItems: Record<string, any[]>
updateOptions: (obj: any) => void
sort: (value: string) => void
group: (value: string) => void
}name
itemdescription
每个项目的插槽
props
{
expand: (v: boolean) => void
item: any
isExpanded: boolean
isMobile: boolean
isSelected: boolean
select: (v: boolean) => void
}name
loadingdescription
定义 loading 为 true 且未提供任何项目时的内容
name
no-datadescription
定义何时不提供任何项目的内容
name
no-resultsdescription
定义何时提供 search 但未找到结果的内容
name
current-itemsdescription
当前页面上的项目
value
any[]name
inputdescription
选中项数组
value
any[]name
item-expandeddescription
展开或关闭项目时发出的事件
value
{ item: any, value: boolean }name
item-selecteddescription
选中或取消选中某项时发出的事件
value
{ item: any, value: boolean }name
page-countdescription
总页数
value
numbername
paginationdescription
关于当前分页的信息
value
{
page: number
itemsPerPage: number
pageStart: number
pageStop: number
pageCount: number
itemsLength: number
}name
toggle-select-alldescription
value
{ items: any[], value: boolean }name
update:expandeddescription
expanded 属性的 .sync 事件
value
any[]name
update:group-bydescription
group-by 属性的 .sync 事件
value
string | string[]name
update:group-descdescription
group-desc 属性的 .sync 事件
value
boolean | boolean[]name
update:items-per-pagedescription
items-page 属性的 .sync 事件
value
numbername
update:multi-sortdescription
multi-sort 属性的 .sync 事件
value
booleanname
update:must-sortdescription
must-sort 属性的 .sync 事件
value
booleanname
update:optionsdescription
关于当前选项的信息
value
{
page: number
itemsPerPage: number
sortBy: string[]
sortDesc: boolean[]
groupBy: string[]
groupDesc: boolean[]
multiSort: boolean
mustSort: boolean
}name
update:pagedescription
page 属性的 .sync 事件
value
numbername
update:sort-bydescription
sort-by 属性的 .sync 事件
value
string | string[]name
update:sort-descdescription
sort-desc 属性的 .sync 事件
value
boolean | boolean[]name
$data-footer-font-sizedefault
map-deep-get($headings, 'caption', 'size') !default;name
$data-footer-icons-after-btn-margin-startdefault
7px !default;name
$data-footer-icons-before-btn-margin-enddefault
7px !default;name
$data-footer-paddingdefault
0 8px !default;name
$data-footer-pagination-margin-enddefault
32px !default;name
$data-footer-pagination-margin-startdefault
24px !default;name
$data-footer-select-margin-enddefault
14px !default;name
$data-footer-select-select-margin-startdefault
34px !default;name
$data-footer-select-select-margin-ydefault
13px !default;name
$data-footer-select-selections-comma-font-sizedefault
map-deep-get($headings, 'caption', 'size') !default;
Caught a mistake or want to contribute to the documentation?
Edit Layout
on GitHub!