数据表格

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

使用

标准数据表假定整个数据集在本地可用。排序、分页和过滤由组件本身支持并在内部完成。

API

组件	描述
v-data-table	主要组件
v-data-table-footer	用于显示数据表标题的功能组件
v-checkbox-btn	可重置轻量的 v-checkbox

服务器端表

这个数据表的变体适用于非常大的数据集，将所有数据加载到客户端会很低效。它支持排序、过滤、分页和选择，就像标准的数据表一样，但所有的逻辑必须由你的后端或数据库外部处理。

在 服务器端表格 页面上查找更多信息和示例。

虚拟表

数据表的虚拟变体与标准变体一样，都依赖于所有数据在本地可用。但与标准变体不同的是，它使用虚拟化技术只渲染少量行。这使其非常适合显示大型数据集。它支持客户端排序和过滤，但不支持分页。

在 虚拟表 页面上查找更多信息和示例。

指南

v-data-table 组件是一个简单而强大的表格操作组件。它非常适合显示大量的表格数据。

步骤项目

表格项可以是具有几乎任何形状或属性数量的对象。唯一的要求是，如果正在使用行选择功能，则需要某种形式的唯一标识符。

标题头

headers 数组是表格的核心。它定义了要显示的属性、它们关联的标签、它们应该如何排序以及它们的外观。.
所有属性都是可选的，但至少应该有 title、value 或 key 中的一个，以便显示不只是一个空列：

headers = [
  { title: 'No data, just a label' },
  { key: 'quantity' },
  { value: 'price' },
]

如果没有定义任何标题，表格将使用第一个项目的所有键作为标题。

标题也可以是一个树结构，具有一个 children 属性，以创建带有 rowspan 和 colspan 的多行标题标签，其计算会自动完成。
叶节点（没有 children 的对象）将被用作每个项目的列。
分支节点（具有 children 的对象）支持与叶节点相同的所有排序和过滤选项，但不能用作列。

键和值

key 属性用于在插槽、事件、过滤器和排序函数中标识列。如果 value 是字符串，则默认为 value 属性。
value 将列映射到项目数组中的属性。如果未定义 value，它将默认为 key，因此在大多数情况下，key 和 value 是可互换的。唯一的例外是保留的键，如 data-table-select 和 data-table-expand，它们必须定义为 key 才能正常工作。
key 和 value 都支持点符号表示法来访问嵌套对象的属性，而且 value 也可以是一个函数，用于组合多个属性或进行其他自定义格式化。如果 value 不是一个字符串，那么 key 必须被定义。

items = [
  {
    id: 1,
    name: {
      first: 'John',
      last: 'Doe',
    },
  }
]
headers = [
  { title: 'First Name', value: 'name.first' },
  { title: 'Last Name', key: 'name.last' },
  {
    title: 'Full Name',
    key: 'fullName',
    value: item => `${item.name.first} ${item.name.last}`,
  },
]

排序、过滤、分页

查看 数据和展示。

自定义设置

其他选项可用于设置width、align、fixed，或者通过 headerProps 为标题元素传递自定义属性，通过 cellProps 为行单元格传递自定义属性。

属性

数据表组件提供了丰富的可定制属性，可以自定义各种方面的外观和行为。

间距

使用 density 属性，你可以为数据表格提供另一种样式。

隐藏默认表头和表脚

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

选择

show-select 属性将在默认表头中渲染一个复选框以切换所有行是否被选择，同时也为每一行渲染一个复选框。

有关更多信息和示例，请参阅 选择示例 页面。

简单复选框

当想要在数据表格的插槽模板中使用复选框组件时，请使用 v-checkbox-btn 组件而不是 v-checkbox 组件。v-checkbox-btn 组件在内部使用，并会遵循表头的对齐方式。

插槽

表头插槽

你可以使用动态插槽 header.<key> 来仅定制特定的列。<key> 对应于在 headers 属性中找到的项目中的 key 属性。

INFO

当使用 show-select 和 show-expand 属性时，内置了两个用于定制选择（header.data-table-select）和展开（header.data-table-expand）列的插槽。

Headers slot

你还可以通过使用 headers 插槽来覆盖所有内部的表头。请记住，你将需要重新实现任何内部功能，比如排序。

项目插槽

通常，你会使用 item.<key> 插槽在特定列中呈现自定义标记。如果你需要更多控制整个行，则可以使用 item 插槽。

项目键插槽

你可以使用动态插槽 item.<key> 来定制特定列。<key> 是发送到 headers 的表头项目中的 key 属性的名称。因此，要定制卡路里列，我们使用 item.calories 插槽。

分组表头插槽

当使用 group-by 属性时，你可以使用 group-header 插槽来定制分组表头。

加载插槽

loading 插槽允许你在获取数据时自定义表格的显示状态。在这个例子中，我们利用 v-skeleton-loader 组件来显示加载动画。

示例

以下是一系列示例，演示了更高级和实际的 v-data-table 组件的使用。

CRUD 操作

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

可展开行

show-expand 属性会在每一行上渲染一个展开图标。你可以使用 item.data-table-expand 插槽来自定义这个图标。这个插槽的位置可以通过在头部数组中添加一个 key: 'data-table-expand' 的列来改变。

与选择类似，扩展需要在每个项目上有一个唯一的属性才能正常工作。默认情况下是 id，但你可以使用 item-value 属性来指定一个不同的项目属性。