Vuetify

商店

企业版

v-data-table 组件用于显示表格数据。功能包括排序、搜索、分页、内嵌式编辑和行选择。

标准数据表格默认将您的数据作为简单行渲染。

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

show-select 属性将在默认标题中呈现一个复选框来切换所有行,并为每个默认行呈现一个复选框。你可以自定义 header.data-table-selectitem.data-table-select 这些插槽的标题。您也可以在一次允许多个选定行之间进行切换,也可以使用 single-select 属性仅允许一次进行切换。

使用 group-bygroup-desc 属性可以将项目的属性的行进行分组。show-group-by 属性将在默认标题中显示一个组按钮。

使用 multi-sort 属性将使您可以同时对多个列进行排序。 启用后,您可以将数组传递给 sort-bysort-desc 来以编程方式控制排序,而不是单个值。

数据表格还提供了一个 search 属性,允许你进行数据筛选。

您可以使用 hide-default-headerhide-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 操作。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!