# 数据表格(Data tables)

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

# 使用

标准数据表格默认会将数据呈现为简单的行。

# API

# 示例

# 属性

# 自定义过滤器

你可以向 custom-filter 属性提供一个函数,覆盖 search 属性的默认过滤。 如果你需要自定义特定列的过滤,你可以给表头数据项的 filter 属性提供一个函数。 类型是(value: any, search: string | null, item: any) => boolean。 即使没有提供 search 属性,这个函数也会一直运作。 因此,你需要确保在不应用过滤器的情况下,函数会返回 true

# 紧凑

使用 dense 属性,可以让数据表格表现为另一种样式。

# 可过滤

在搜索表格内容时,你可以设置表头数据项的 filterable 属性为 false,禁止对应列的内容被包含在搜索结果内。 下面的示例中,不会被搜索到 dessert 列的内容。

# 表脚属性

v-data-table 使用 v-data-footer 组件渲染一个默认的表脚。 你可以使用 footer-props 将属性传递给这个组件。

# 分组

你可以使用 group-bygroup-desc 属性分组。 show-group-by 属性将在默认表头中显示分组按钮。 你可以设置表头数据项的 groupable 属性为 false ,禁用对应属性的分组。

# 隐藏默认表头和表脚

你可以应用 hide-default-headerhide-default-footer属性,分别移除默认表头和表脚。

# 加载中

你可以使用 loading 属性来表示正在加载表格数据。 即使表格中没有数据,也会显示一条加载信息。 加载信息可以使用 loading-text 属性或 loading 插槽来自定义。

# 多列排序

使用 multi-sort 属性可以根据多列同时排序。 启用后,你可以向 sort-bysort-desc 传递数组以控制排序。

# 行选择

show-select 属性将在默认表头中渲染一个复选框以切换所有行是否被选择,同时也为每个默认行渲染一个复选框。 你可以分别使用 header.data-table-selectitem.data-table-select 的插槽来自定义。 你还可以使用 single-select 属性,指定能同时选择多行还是只能选择一行。

# 搜索

数据表格还提供了 search 属性以过滤数据。

# 插槽

v-data-table提供了大量的插槽用于自定义。 下面的示例展示了其中一些插槽以及你可以用它们做什么。 It is important to note some slots (eg: item/body/header) will completely take over the internal rendering of the component which will require you to re-implement functionalities such as selection and expansion. Some slots will override each other such as: body > item > item.<name> and header/header.<name>.

# 表头

你可以使用动态插槽 header.<name> 来自定义某些列。 <name> 是传给 headers 的某一表头数据项的 value 属性的值。

# 项目

你可以使用动态插槽 item.<name> 来自定义某些列。 <name> 是传给 headers 的某一表头数据项的 value 属性的值。 所以要自定义 calories 列,我们要使用 item.calories 插槽。

# 简单复选框

如果想要在数据表格的插槽模板中使用复选框,请使用 v-simple-checkbox 组件,而不是 v-checkbox 组件。 v-simplle-checbox 组件被内部使用,跟随表头对齐方式。

# 其他

# CRUD 操作

带 CRUD 操作的 v-data-table 使用 v-dialog 组件来编辑每行数据。

# 编辑用对话框

v-edit-dialog 组件可用于直接在 v-data-table 中编辑数据。 如果点击 v-edit-dialog 外部时不想关闭对话框,可以添加 persistent 属性。

# 可展开行

show-expand 属性会在每个默认行上渲染一个展开图标。 你可以使用 item.data-table-extension 插槽来自定义。 添加一列 value: 'data-table-expand' 到 headers 数组,就能自定义这个插槽的位置。 你还可以使用 single-expand 属性,指定能同时展开多行还是只能展开一行。 The expanded rows are available on the synced prop expanded.sync. Row items require a unique key property for expansion to work. The default is id, but you can use the item-key prop to specify a different item property.

# 外部分页

要在外部控制分页,可以使用单独的属性或使用 options 属性。 记住,你必须应用 .sync 修饰符。

# 外部排序

要在外部控制排序,可以使用单独的属性或使用 options 属性。 记住,你必须应用 .sync 修饰符。

# 服务器端分页和排序

如果你正在从后端服务器加载已经分页和排序的数据,你可以使用 server-items-length 属性。 使用这个属性会禁用内置的排序和分页,因此,你需要用特定事件(update:pageupdate:sortByupdate:options 等)来得知什么时候要向后端服务器请求新页面。 获取数据时,使用 loading 属性显示进度条。

了解更多?

继续学习由 我们的团队 选择的相关内容,或通过使用下面的导航链接在页面之间跳转。
GitHub 上编辑此页面
最后更新:10/07/2024, 11:31:37 AM