v-data-table 组件用于显示表格数据。功能包括排序、搜索、分页、内嵌式编辑和行选择。
从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。
启用列宽的计算。widths 属性将在部分作用域内可用
设置标题（使用 <caption>）
过滤项目的函数
用于分组项目的函数
用于排序项目的函数
将暗色主题变量应用到组件。你可以在 dark themes 的 Material Design 文档中找到更多有关信息。
降低行高度
完全禁用过滤
完全禁用分页
完全禁用排序
用于展开按钮的图标。
扩展项目数组。可以与 .sync 修饰符一起使用
固定页眉至表格顶部。注意： 在 IE11 中不可用
更多信息请访问 v-data-footer API
改变了项目分组时应使用哪个项目属性。目前只支持单一的分组格式。 group 或 ['group']。当使用数组时，只考虑第一个元素。可与 .sync 修改器一起使用。
更改完成的方向分组。可以与 .sync 修饰器一起使用
将属性传递到默认标题。 有关更多信息，请参见 'v-data-table-header' API
表头数组
{
text: string
value: string
align?: 'start' | 'center' | 'end'
sortable?: boolean
filterable?: boolean
groupable?: boolean
divider?: boolean
class?: string | string[]
width?: string | number
filter?: (value: any, search: string, item: any) => boolean
sort?: (a: any, b: any) => number
}可与 hide-default-header 结合使用，指定表格中的列数，以使扩展行和加载条正常运行。
设置表的显式高度
默认隐藏页脚
隐藏默认标题
Property on supplied items that contains item's row class or function that takes an item as an argument and returns the class of corresponding row
每个项目对象上的字段，用于指定唯一键。 对于每个项目，此属性的值必须唯一。
要显示的项目数组
更改每页应可见的项数。可以与 .sync 修饰符一起使用
为组件设置浅色主题。
指定加载器的高度
如果为 true 且未提供任何项目，则将显示加载文本
当 loading 为 true 且未提供任何物品时显示的文本
设置组件的语言环境。 用于翻译内部文本字符串。
用于设置何时在常规表和移动视图之间切换
如果为 true，则可以对多个属性进行排序
如果为 true，则不能禁用排序，它将始终在升序和降序之间切换
未向组件提供任何项目时显示的文本
使用 search 属性时显示的文本，但没有结果
选项的组合对象。定义见下面的例子。可与 .sync 修改器一起使用。
{
page: number
itemsPerPage: number
sortBy: string[]
sortDesc: boolean[]
groupBy: string[]
groupDesc: boolean[]
multiSort: boolean
mustSort: boolean
}更改显示的项目页面。 可以和 .sync 修饰符一起使用
用于过滤项目的文本输入
每个项目上的属性，用于确定其是否可选择。
仅在服务器提供数据时使用。 应该设置为服务器上可用项目的总数，以便分页可以正常工作
在默认行中显示展开切换
在标题中通过切换显示分组并启用分组的行
在标题和行中显示选择复选框（如果使用默认行）
将扩展模式更改为单个扩展
将选择模式更改为单选
更改应该用于排序顺序的项目属性（或属性）。可以与 .sync 修饰符一起使用
改变排序的方向。可以与 .sync 修饰器一起使用
用于控制选定的行
替换默认表 <tbody> 的插槽
{
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
headers: TableHeader[]
isMobile: boolean
isSelected: (item: any) => boolean
select: (item: any, value: boolean) => void
isExpanded: (item: any) => boolean
expand: (item: any, value: boolean) => void
}将元素追加到默认表 <tbody> 的末尾
{
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
headers: TableHeader[]
isMobile: boolean
isSelected: (item: any) => boolean
select: (item: any, value: boolean) => void
isExpanded: (item: any) => boolean
expand: (item: any, value: boolean) => void
}将元素添加到默认表 <tbody> 的开头
{
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
headers: TableHeader[]
isMobile: boolean
isSelected: (item: any) => boolean
select: (item: any, value: boolean) => void
isExpanded: (item: any) => boolean
expand: (item: any, value: boolean) => void
}插槽自定义展开的行
{
item: any
headers: TableHeader[]
}添加自定义页脚的插槽
{
props: {
options: {
page: number
itemsPerPage: number
sortBy: string[]
sortDesc: boolean[]
groupBy: string[]
groupDesc: boolean[]
multiSort: boolean
mustSort: boolean
},
pagination: {
page: number
itemsPerPage: number
pageStart: number
pageStop: number
pageCount: number
itemsLength: number
},
itemsPerPageText: string
},
on: {}
headers: TableHeader[]
widths: []
}自定义页脚页文本的插槽
{
pageStart: number
pageStop: number
itemsLength: number
}替换分组行的默认渲染的插槽
{
group: string
options: {
page: number
itemsPerPage: number
sortBy: string[]
sortDesc: boolean[]
groupBy: string[]
groupDesc: boolean[]
multiSort: boolean
mustSort: boolean
},
items: any[]
headers: TableHeader[]
}用于自定义组标题的默认渲染的插槽
{
group: string
groupBy: string[]
items: any[]
headers: TableHeader[]
isOpen: boolean
toggle: () => void
remove: () => void
}用于自定义组摘要的默认渲染的插槽
{
group: string
groupBy: string[]
items: any[]
headers: TableHeader[]
isOpen: boolean
toggle: () => void
}{
props: {
headers: TableHeader[]
options: {
page: number
itemsPerPage: number
sortBy: string[]
sortDesc: boolean[]
groupBy: string[]
groupDesc: boolean[]
multiSort: boolean
mustSort: boolean
},
mobile: boolean
showGroupBy: boolean
someItems: boolean
everyItem: boolean
},
on: {
sort: (value: string) => void
group: (value: string) => void
toggle-select-all: (value: boolean) => void
}
}自定义特定标题列的插槽
{
header: TableHeader
}替换标题中默认的 v-simple-checkbox 的插槽
{
props: {
value: boolean
indeterminate: boolean
},
on: {
input: (value: boolean) => void
}
}替换行默认渲染的插槽
{
expand: (v: boolean) => void
item: any
isExpanded: boolean
isMobile: boolean
isSelected: boolean
select: (v: boolean) => void
headers: TableHeader[]
index: number
}自定义特定列的插槽
{
item: any
header: TableHeader
value: any
}用于扩展行时替换默认的 v-icon 的插槽
{
expand: (v: boolean) => void
item: any
isExpanded: boolean
isMobile: boolean
isSelected: boolean
select: (v: boolean) => void
headers: TableHeader[]
}用于替换选择行时使用的默认 v-simple-checkbox 的插槽
{
expand: (v: boolean) => void
item: any
isExpanded: boolean
isMobile: boolean
isSelected: boolean
select: (v: boolean) => void
headers: TableHeader[]
}定义 loading 为 true 且未提供任何项目时的内容
定义何时不提供任何项目的内容
定义何时提供 search 但未找到结果的内容
用于替换默认 <v-progress-linear> 组件的插槽
将内容添加到表上方的插槽
{
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
}单击表行时退出。 包含该行的项目。 注意：当通过诸如 item 或 body 之类的插槽定义表格行时，不会发出。
any, {
expand: (value: boolean) => void,
headers: TableHeader[],
isExpanded: boolean,
isMobile: boolean,
isSelected: boolean,
item: any,
select: (value: boolean) => void
}Emits when a table row is right-clicked. The item for the row is included. NOTE: will not emit when table rows are defined through a slot such as item or body.
MouseEvent, {
expand: (value: boolean) => void,
headers: TableHeader[],
isExpanded: boolean,
isMobile: boolean,
isSelected: boolean,
item: any,
select: (value: boolean) => void
}当前页面上的项目
any[]Emits when a table row is double-clicked. The item for the row is included. NOTE: will not emit when table rows are defined through a slot such as item or body.
MouseEvent, {
expand: (value: boolean) => void,
headers: TableHeader[],
isExpanded: boolean,
isMobile: boolean,
isSelected: boolean,
item: any,
select: (value: boolean) => void
}选中项数组
any[]展开或关闭项目时发出的事件
{ item: any, value: boolean }选中或取消选中某项时发出的事件
{ item: any, value: boolean }总页数
number关于当前分页的信息
{
page: number
itemsPerPage: number
pageStart: number
pageStop: number
pageCount: number
itemsLength: number
}{ items: any[], value: boolean }expanded 属性的 .sync 事件
any[]group-by 属性的 .sync 事件
string | string[]group-desc 属性的 .sync 事件
boolean | boolean[]items-page 属性的 .sync 事件
numbermulti-sort 属性的 .sync 事件
booleanmust-sort 属性的 .sync 事件
boolean关于当前选项的信息
{
page: number
itemsPerPage: number
sortBy: string[]
sortDesc: boolean[]
groupBy: string[]
groupDesc: boolean[]
multiSort: boolean
mustSort: boolean
}page 属性的 .sync 事件
numbersort-by 属性的 .sync 事件
string | string[]sort-desc 属性的 .sync 事件
boolean | boolean[]$border-radius-root !default;32px !default;$data-table-dense-header-height !default;inset 0px 4px 8px -5px rgba(50, 50, 50, 0.75), inset 0px -4px 8px -5px rgba(50, 50, 50, 0.75) !default;24px !default;8px !default;56px !default;18px !default;18px !default;18px !default;18px !default;600 !default;48px !default;$data-table-border-radius $data-table-border-radius 0 0 !default;map-deep-get($headings, 'caption', 'size') !default;48px !default;map-deep-get($headings, 'subtitle-2', 'size') !default;48px !default;35px !default;17px !default;8px !default;0 16px !default;下面是一些简单到复杂的例子。
show-select 属性将在默认标题中呈现一个复选框来切换所有行，并为每个默认行呈现一个复选框。你可以自定义 header.data-table-select 和 item.data-table-select 这些插槽的标题。您也可以在一次允许多个选定行之间进行切换，也可以使用 single-select 属性仅允许一次进行切换。
使用 group-by 和 group-desc 属性可以将项目的属性的行进行分组。show-group-by 属性将在默认标题中显示一个组按钮。
使用 multi-sort 属性将使您可以同时对多个列进行排序。 启用后，您可以将数组传递给 sort-by 和 sort-desc 来以编程方式控制排序，而不是单个值。
数据表格还提供了一个 search 属性，允许你进行数据筛选。
您可以使用 hide-default-header 和 hide-default-footer 属性分别移除默认页眉和页脚。
您可以使用 loading 属性来表示表中的数据正在加载中。 如果表中没有数据，也会显示加载消息。 此消息可以使用 loading-text 属性或 loading 插槽自定义。
使用 dense 属性，您可以为数据表提供其他样式。
v-data-table 使用 v-data-footer 组件渲染默认页脚。 您可以使用 footer-props 将属性传递到此组件。
通过在标题项上将 filterable 的属性设置为 false，可以轻松地禁止在搜索表行时包括特定列。 在下面的示例中，甜点名称列不再可搜索。
v-data-table 提供了大量用于定制表的插槽。 此示例展示了其中一些插槽，以及每个插槽可以做什么。 重要的是要注意一些插槽（例如：item/body/header）将完全代替组件的内部渲染，这将要求您重新实现选择和扩展之类的功能。 某些插槽会相互覆盖，例如：body > item > item.<name> 和 header/header.<name>。
当想在你的数据表中的插槽模板中使用复选框组件时，请使用 v-simple-checkbox 组件，而不是 v-checkbox 组件。v-simple-checkbox 组件是内部使用的，并且会将表头对齐。
show-expand 属性将在每个默认行上呈现一个展开图标。 您可以使用 item.data-table-expand 插槽自定义。 可以通过在标题数组中添加一个带有 value: 'data-table-expand' 的列来定制该插槽的位置。 您也可以在一次允许多个扩展行之间切换，也可以使用 single-expand 属性只允许一个扩展行之间切换。 展开的行在同步属性 expanded.sync 上可用
您可以通过为 custom-filter 属性提供函数来覆盖 search 属性所使用的默认过滤。 如果您需要自定义特定列的过滤，则可以在标头项目的 filter
属性中提供函数。 标识是 (value: any, search: string | null, item: any) => boolean。 即使未提供 search 属性，该功能也将始终运行。 因此，如果不应用过滤器，则需要确保以值 true 提前退出。
您可以使用 header.<name> 的动态插槽来仅自定义某些列。 <name> 是发送到 headers 的相应标题项中 value 属性的名称。
您可以使用动态插槽 item.<name> 仅自定义某些列。<name> 是发送到 headers 的相应标题项中 value 属性的名称。 因此，要自定义 calories
列，我们使用 item.calories 插槽。
分页可以通过 pagination 属性在外部控制，切记使用时必须应用 .sync 修饰符。
排序也同样可以通过 pagination 属性在外部控制，也必须使用 .sync 修饰符。你也可以使用该属性设置默认的排序序列。
如果要加载已经从后端进行分页和排序的数据，则可以使用 server-items-length 属性。 定义此属性将禁用内置的排序和分页功能，而您需要使用可用的事件（update:page, update:sortBy, update:options, 等）来知道何时请求新的后端的页面。 在获取数据时，使用 loading 属性显示进度条。
v-edit-dialog 组件可用于直接在 v-data-table 中编辑数据。 您可以通过添加 persistent 属性来阻止在外部点击 v-edit-dialog 时关闭。
数据表格使用 v-dialog 组件来进行每行的 CRUD 操作。