数据迭代器

v-data-iterator 组件用于显示任意数据，并与 v-data-table 组件共享大部分功能。其功能包括排序、搜索、分页和选择。

TIP

此特性在 v3.4.0 (Blackguard) 版本引入。

使用

v-data-iterator 允许你精确地定制如何显示你的数据。在这个例子中，我们使用了带有卡片的网格。

API

组件	描述
v-data-iterator	主要组件

组件结构

v-data-iterator 中元素的推荐放置位置是：

• 在主内容上方放置一个 v-toolbar 或类似的组件
• 将内容放在页眉之后
• 在主要内容下方放置一个 v-pagination

元素 / 区域	描述
1. Header (optional)	页眉用于显示标题和动作
2. Container	容器是组件的根元素
3. Footer (optional)	页脚用于显示分页

指南

v-data-iterator 组件用于显示数据，并且与 v-data-table 组件共享大部分功能。其功能包括排序、搜索、分页和选择。

以下代码片段是一个基本的 v-data-iterator 组件示例：

<v-data-iterator :items="[1, 2, 3, 4, 5]">
  <template v-slot:default="{ items }">
    <v-list-item
      v-for="(item, i) in items"
      :key="i"
      :title="`Item ${i}`"
    ></v-list-item>
  </template>
</v-data-iterator>

示例

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

插槽

v-data-iterator 组件有 4 个主要插槽

默认值

v-data-iterator 和 v-data-table 一样，具有用于选择和展开的内部状态。在这个例子中，我们使用默认插槽上可用的 isExpanded 和 toggleExpand 方法。

页眉和页脚

v-data-iterator 具有 header 和 footer 插槽，用于添加额外的内容。

可控属性

排序、过滤和分页可以通过使用各自的属性来在外部进行控制。

加载器属性

加载器可以在 "loading" 属性上使用以更改加载器