数据迭代器

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

用例

v-data-iterator 允许您精确地自定义如何显示数据。在本例中，我们使用带有卡片的网格。

Data iterators（数据迭代器） - 图1

API

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

Data iterators（数据迭代器） - 图2

示例

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

插槽

v-data-iterator 同时具有页眉和页脚插槽，用于添加额外的内容。

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-data-iterator
  4.       :items="items"
  5.       :items-per-page.sync="itemsPerPage"
  6.       hide-default-footer
  7.     >
  8.       <template v-slot:header>
  9.         <v-toolbar
  10.           class="mb-2"
  11.           color="indigo darken-5"
  12.           dark
  13.           flat
  14.         >
  15.           <v-toolbar-title>This is a header</v-toolbar-title>
  16.         </v-toolbar>
  17.       </template>
  19.       <template v-slot:default="props">
  20.         <v-row>
  21.           <v-col
  22.             v-for="item in props.items"
  23.             :key="item.name"
  24.             cols="12"
  25.             sm="6"
  26.             md="4"
  27.             lg="3"
  28.           >
  29.             <v-card>
  30.               <v-card-title class="subheading font-weight-bold">{{ item.name }}</v-card-title>
  32.               <v-divider></v-divider>
  34.               <v-list dense>
  35.                 <v-list-item>
  36.                   <v-list-item-content>Calories:</v-list-item-content>
  37.                   <v-list-item-content class="align-end">{{ item.calories }}</v-list-item-content>
  38.                 </v-list-item>
  40.                 <v-list-item>
  41.                   <v-list-item-content>Fat:</v-list-item-content>
  42.                   <v-list-item-content class="align-end">{{ item.fat }}</v-list-item-content>
  43.                 </v-list-item>
  45.                 <v-list-item>
  46.                   <v-list-item-content>Carbs:</v-list-item-content>
  47.                   <v-list-item-content class="align-end">{{ item.carbs }}</v-list-item-content>
  48.                 </v-list-item>
  50.                 <v-list-item>
  51.                   <v-list-item-content>Protein:</v-list-item-content>
  52.                   <v-list-item-content class="align-end">{{ item.protein }}</v-list-item-content>
  53.                 </v-list-item>
  55.                 <v-list-item>
  56.                   <v-list-item-content>Sodium:</v-list-item-content>
  57.                   <v-list-item-content class="align-end">{{ item.sodium }}</v-list-item-content>
  58.                 </v-list-item>
  60.                 <v-list-item>
  61.                   <v-list-item-content>Calcium:</v-list-item-content>
  62.                   <v-list-item-content class="align-end">{{ item.calcium }}</v-list-item-content>
  63.                 </v-list-item>
  65.                 <v-list-item>
  66.                   <v-list-item-content>Iron:</v-list-item-content>
  67.                   <v-list-item-content class="align-end">{{ item.iron }}</v-list-item-content>
  68.                 </v-list-item>
  69.               </v-list>
  70.             </v-card>
  71.           </v-col>
  72.         </v-row>
  73.       </template>
  75.       <template v-slot:footer>
  76.         <v-toolbar
  77.           class="mt-2"
  78.           color="indigo"
  79.           dark
  80.           flat
  81.         >
  82.           <v-toolbar-title class="subheading">This is a footer</v-toolbar-title>
  83.         </v-toolbar>
  84.       </template>
  85.     </v-data-iterator>
  86.   </v-container>
  87. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       itemsPerPage: 4,
  5.       items: [
  6.         {
  7.           name: 'Frozen Yogurt',
  8.           calories: 159,
  9.           fat: 6.0,
  10.           carbs: 24,
  11.           protein: 4.0,
  12.           sodium: 87,
  13.           calcium: '14%',
  14.           iron: '1%',
  15.         },
  16.         {
  17.           name: 'Ice cream sandwich',
  18.           calories: 237,
  19.           fat: 9.0,
  20.           carbs: 37,
  21.           protein: 4.3,
  22.           sodium: 129,
  23.           calcium: '8%',
  24.           iron: '1%',
  25.         },
  26.         {
  27.           name: 'Eclair',
  28.           calories: 262,
  29.           fat: 16.0,
  30.           carbs: 23,
  31.           protein: 6.0,
  32.           sodium: 337,
  33.           calcium: '6%',
  34.           iron: '7%',
  35.         },
  36.         {
  37.           name: 'Cupcake',
  38.           calories: 305,
  39.           fat: 3.7,
  40.           carbs: 67,
  41.           protein: 4.3,
  42.           sodium: 413,
  43.           calcium: '3%',
  44.           iron: '8%',
  45.         },
  46.       ],
  47.     }),
  48.   }
  49. </script>

Data iterators（数据迭代器） - 图3

扩展

v-data-iterator 具有内部状态，可以进行选择和扩展，就像 v-data-table 一样。在本例中，我们使用了在默认插槽上可用的 isExpanded 和 expand 方法。

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-switch v-model="expand" label="Expand Single Item"></v-switch>
  4.     <v-data-iterator
  5.       :items="items"
  6.       item-key="name"
  7.       :items-per-page="4"
  8.       :single-expand="expand"
  9.       hide-default-footer
  10.     >
  11.       <template v-slot:default="{ items, isExpanded, expand }">
  12.         <v-row>
  13.           <v-col
  14.             v-for="item in items"
  15.             :key="item.name"
  16.             cols="12"
  17.             sm="6"
  18.             md="4"
  19.             lg="3"
  20.           >
  21.             <v-card>
  22.               <v-card-title>
  23.                 <h4>{{ item.name }}</h4>
  24.               </v-card-title>
  25.               <v-switch
  26.                 :input-value="isExpanded(item)"
  27.                 :label="isExpanded(item) ? 'Expanded' : 'Closed'"
  28.                 class="pl-4 mt-0"
  29.                 @change="(v) => expand(item, v)"
  30.               ></v-switch>
  31.               <v-divider></v-divider>
  32.               <v-list v-if="isExpanded(item)" dense>
  33.                 <v-list-item>
  34.                   <v-list-item-content>Calories:</v-list-item-content>
  35.                   <v-list-item-content class="align-end">{{ item.calories }}</v-list-item-content>
  36.                 </v-list-item>
  37.                 <v-list-item>
  38.                   <v-list-item-content>Fat:</v-list-item-content>
  39.                   <v-list-item-content class="align-end">{{ item.fat }}</v-list-item-content>
  40.                 </v-list-item>
  41.                 <v-list-item>
  42.                   <v-list-item-content>Carbs:</v-list-item-content>
  43.                   <v-list-item-content class="align-end">{{ item.carbs }}</v-list-item-content>
  44.                 </v-list-item>
  45.                 <v-list-item>
  46.                   <v-list-item-content>Protein:</v-list-item-content>
  47.                   <v-list-item-content class="align-end">{{ item.protein }}</v-list-item-content>
  48.                 </v-list-item>
  49.                 <v-list-item>
  50.                   <v-list-item-content>Sodium:</v-list-item-content>
  51.                   <v-list-item-content class="align-end">{{ item.sodium }}</v-list-item-content>
  52.                 </v-list-item>
  53.                 <v-list-item>
  54.                   <v-list-item-content>Calcium:</v-list-item-content>
  55.                   <v-list-item-content class="align-end">{{ item.calcium }}</v-list-item-content>
  56.                 </v-list-item>
  57.                 <v-list-item>
  58.                   <v-list-item-content>Iron:</v-list-item-content>
  59.                   <v-list-item-content class="align-end">{{ item.iron }}</v-list-item-content>
  60.                 </v-list-item>
  61.               </v-list>
  62.             </v-card>
  63.           </v-col>
  64.         </v-row>
  65.       </template>
  66.     </v-data-iterator>
  67.   </v-container>
  68. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       expand: false,
  5.       items: [
  6.         {
  7.           name: 'Frozen Yogurt',
  8.           calories: 159,
  9.           fat: 6.0,
  10.           carbs: 24,
  11.           protein: 4.0,
  12.           sodium: 87,
  13.           calcium: '14%',
  14.           iron: '1%',
  15.         },
  16.         {
  17.           name: 'Ice cream sandwich',
  18.           calories: 237,
  19.           fat: 9.0,
  20.           carbs: 37,
  21.           protein: 4.3,
  22.           sodium: 129,
  23.           calcium: '8%',
  24.           iron: '1%',
  25.         },
  26.         {
  27.           name: 'Eclair',
  28.           calories: 262,
  29.           fat: 16.0,
  30.           carbs: 23,
  31.           protein: 6.0,
  32.           sodium: 337,
  33.           calcium: '6%',
  34.           iron: '7%',
  35.         },
  36.         {
  37.           name: 'Cupcake',
  38.           calories: 305,
  39.           fat: 3.7,
  40.           carbs: 67,
  41.           protein: 4.3,
  42.           sodium: 413,
  43.           calcium: '3%',
  44.           iron: '8%',
  45.         },
  46.       ],
  47.     }),
  48.   }
  49. </script>

Data iterators（数据迭代器） - 图4

过滤器

顺序，过滤器和分页可以使用单独的道具从外部进行控制

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-data-iterator
  4.       :items="items"
  5.       :items-per-page.sync="itemsPerPage"
  6.       :page="page"
  7.       :search="search"
  8.       :sort-by="sortBy.toLowerCase()"
  9.       :sort-desc="sortDesc"
  10.       hide-default-footer
  11.     >
  12.       <template v-slot:header>
  13.         <v-toolbar
  14.           dark
  15.           color="blue darken-3"
  16.           class="mb-1"
  17.         >
  18.           <v-text-field
  19.             v-model="search"
  20.             clearable
  21.             flat
  22.             solo-inverted
  23.             hide-details
  24.             prepend-inner-icon="search"
  25.             label="Search"
  26.           ></v-text-field>
  27.           <template v-if="$vuetify.breakpoint.mdAndUp">
  28.             <v-spacer></v-spacer>
  29.             <v-select
  30.               v-model="sortBy"
  31.               flat
  32.               solo-inverted
  33.               hide-details
  34.               :items="keys"
  35.               prepend-inner-icon="search"
  36.               label="Sort by"
  37.             ></v-select>
  38.             <v-spacer></v-spacer>
  39.             <v-btn-toggle
  40.               v-model="sortDesc"
  41.               mandatory
  42.             >
  43.               <v-btn
  44.                 large
  45.                 depressed
  46.                 color="blue"
  47.                 :value="false"
  48.               >
  49.                 <v-icon>mdi-arrow-up</v-icon>
  50.               </v-btn>
  51.               <v-btn
  52.                 large
  53.                 depressed
  54.                 color="blue"
  55.                 :value="true"
  56.               >
  57.                 <v-icon>mdi-arrow-down</v-icon>
  58.               </v-btn>
  59.             </v-btn-toggle>
  60.           </template>
  61.         </v-toolbar>
  62.       </template>
  64.       <template v-slot:default="props">
  65.         <v-row>
  66.           <v-col
  67.             v-for="item in props.items"
  68.             :key="item.name"
  69.             cols="12"
  70.             sm="6"
  71.             md="4"
  72.             lg="3"
  73.           >
  74.             <v-card>
  75.               <v-card-title class="subheading font-weight-bold">{{ item.name }}</v-card-title>
  77.               <v-divider></v-divider>
  79.               <v-list dense>
  80.                 <v-list-item
  81.                   v-for="(key, index) in filteredKeys"
  82.                   :key="index"
  83.                 >
  84.                   <v-list-item-content :class="{ 'blue--text': sortBy === key }">{{ key }}:</v-list-item-content>
  85.                   <v-list-item-content class="align-end" :class="{ 'blue--text': sortBy === key }">{{ item[key.toLowerCase()] }}</v-list-item-content>
  86.                 </v-list-item>
  87.               </v-list>
  88.             </v-card>
  89.           </v-col>
  90.         </v-row>
  91.       </template>
  93.       <template v-slot:footer>
  94.         <v-row class="mt-2" align="center" justify="center">
  95.           <span class="grey--text">Items per page</span>
  96.           <v-menu offset-y>
  97.             <template v-slot:activator="{ on }">
  98.               <v-btn
  99.                 dark
  100.                 text
  101.                 color="primary"
  102.                 class="ml-2"
  103.                 v-on="on"
  104.               >
  105.                 {{ itemsPerPage }}
  106.                 <v-icon>mdi-chevron-down</v-icon>
  107.               </v-btn>
  108.             </template>
  109.             <v-list>
  110.               <v-list-item
  111.                 v-for="(number, index) in itemsPerPageArray"
  112.                 :key="index"
  113.                 @click="updateItemsPerPage(number)"
  114.               >
  115.                 <v-list-item-title>{{ number }}</v-list-item-title>
  116.               </v-list-item>
  117.             </v-list>
  118.           </v-menu>
  120.           <v-spacer></v-spacer>
  122.           <span
  123.             class="mr-4
  124.             grey--text"
  125.           >
  126.             Page {{ page }} of {{ numberOfPages }}
  127.           </span>
  128.           <v-btn
  129.             fab
  130.             dark
  131.             color="blue darken-3"
  132.             class="mr-1"
  133.             @click="formerPage"
  134.           >
  135.             <v-icon>mdi-chevron-left</v-icon>
  136.           </v-btn>
  137.           <v-btn
  138.             fab
  139.             dark
  140.             color="blue darken-3"
  141.             class="ml-1"
  142.             @click="nextPage"
  143.           >
  144.             <v-icon>mdi-chevron-right</v-icon>
  145.           </v-btn>
  146.         </v-row>
  147.       </template>
  148.     </v-data-iterator>
  149.   </v-container>
  150. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         itemsPerPageArray: [4, 8, 12],
  6.         search: '',
  7.         filter: {},
  8.         sortDesc: false,
  9.         page: 1,
  10.         itemsPerPage: 4,
  11.         sortBy: 'name',
  12.         keys: [
  13.           'Name',
  14.           'Calories',
  15.           'Fat',
  16.           'Carbs',
  17.           'Protein',
  18.           'Sodium',
  19.           'Calcium',
  20.           'Iron',
  21.         ],
  22.         items: [
  23.           {
  24.             name: 'Frozen Yogurt',
  25.             calories: 159,
  26.             fat: 6.0,
  27.             carbs: 24,
  28.             protein: 4.0,
  29.             sodium: 87,
  30.             calcium: '14%',
  31.             iron: '1%',
  32.           },
  33.           {
  34.             name: 'Ice cream sandwich',
  35.             calories: 237,
  36.             fat: 9.0,
  37.             carbs: 37,
  38.             protein: 4.3,
  39.             sodium: 129,
  40.             calcium: '8%',
  41.             iron: '1%',
  42.           },
  43.           {
  44.             name: 'Eclair',
  45.             calories: 262,
  46.             fat: 16.0,
  47.             carbs: 23,
  48.             protein: 6.0,
  49.             sodium: 337,
  50.             calcium: '6%',
  51.             iron: '7%',
  52.           },
  53.           {
  54.             name: 'Cupcake',
  55.             calories: 305,
  56.             fat: 3.7,
  57.             carbs: 67,
  58.             protein: 4.3,
  59.             sodium: 413,
  60.             calcium: '3%',
  61.             iron: '8%',
  62.           },
  63.           {
  64.             name: 'Gingerbread',
  65.             calories: 356,
  66.             fat: 16.0,
  67.             carbs: 49,
  68.             protein: 3.9,
  69.             sodium: 327,
  70.             calcium: '7%',
  71.             iron: '16%',
  72.           },
  73.           {
  74.             name: 'Jelly bean',
  75.             calories: 375,
  76.             fat: 0.0,
  77.             carbs: 94,
  78.             protein: 0.0,
  79.             sodium: 50,
  80.             calcium: '0%',
  81.             iron: '0%',
  82.           },
  83.           {
  84.             name: 'Lollipop',
  85.             calories: 392,
  86.             fat: 0.2,
  87.             carbs: 98,
  88.             protein: 0,
  89.             sodium: 38,
  90.             calcium: '0%',
  91.             iron: '2%',
  92.           },
  93.           {
  94.             name: 'Honeycomb',
  95.             calories: 408,
  96.             fat: 3.2,
  97.             carbs: 87,
  98.             protein: 6.5,
  99.             sodium: 562,
  100.             calcium: '0%',
  101.             iron: '45%',
  102.           },
  103.           {
  104.             name: 'Donut',
  105.             calories: 452,
  106.             fat: 25.0,
  107.             carbs: 51,
  108.             protein: 4.9,
  109.             sodium: 326,
  110.             calcium: '2%',
  111.             iron: '22%',
  112.           },
  113.           {
  114.             name: 'KitKat',
  115.             calories: 518,
  116.             fat: 26.0,
  117.             carbs: 65,
  118.             protein: 7,
  119.             sodium: 54,
  120.             calcium: '12%',
  121.             iron: '6%',
  122.           },
  123.         ],
  124.       }
  125.     },
  126.     computed: {
  127.       numberOfPages () {
  128.         return Math.ceil(this.items.length / this.itemsPerPage)
  129.       },
  130.       filteredKeys () {
  131.         return this.keys.filter(key => key !== `Name`)
  132.       },
  133.     },
  134.     methods: {
  135.       nextPage () {
  136.         if (this.page + 1 <= this.numberOfPages) this.page += 1
  137.       },
  138.       formerPage () {
  139.         if (this.page - 1 >= 1) this.page -= 1
  140.       },
  141.       updateItemsPerPage (number) {
  142.         this.itemsPerPage = number
  143.       },
  144.     },
  145.   }
  146. </script>

Data iterators（数据迭代器） - 图5