Vuetify.js页面上的多个分页

Question

现在，我的分页在所有v-data-iterator中同步工作。我不知道数组页面中会有多少个元素，所以我不能为“fieldsData”指定静态名称，例如"page_1“、”page_2“……我是否可以使用不同的变量来代替"page“，例如"page + index"？如何在一个页面上进行独立的分页？我的代码：

<template>
<div v-for="(fieldData, index) in fieldsData"
  :key="index"
>
<template
  v-if="fieldData.data"
>
  <v-data-iterator
    :items="fieldData.data"
    :page.sync="page"
    :items-per-page="itemsPerPage"
    hide-default-footer
    @page-count="pageCount = $event"
  >
    <template v-slot:default="props">
      <v-row
        v-else-if="fieldData.meta.type === 'photo'"
      >
        <v-col
          v-for="(item, ind) in props.items"
          :key="item.id"
          cols="12"
          sm="6"
          md="3"
          lg="3"
        >
          <v-card>
            ...
          </v-card>
        </v-col>
        <div class="text-center pt-2">
          <v-pagination
            v-model="page"
            :length="pageCount"
          ></v-pagination>
          <v-text-field
            :value="itemsPerPage"
            label="Items per page"
            type="number"
            min="-1"
            max="15"
            @input="itemsPerPage = parseInt($event, 10)"
          ></v-text-field>
        </div>
      </v-row>
      <v-row
        v-else
      >
        <v-row>
          <v-col
            v-for="(item, ind) in props.items"
            :key="item.id"
            cols="12"
            sm="6"
            md="3"
            lg="3"
          >
            <v-card>
              ...
            </v-card>
          </v-col>
        </v-row>
        <v-row>
          <div class="text-center pt-2">
            <v-pagination
              v-model="page"
              :length="pageCount"
            ></v-pagination>
            <v-text-field
              :value="itemsPerPage"
              label="Items per page"
              type="number"
              min="-1"
              max="15"
              @input="itemsPerPage = parseInt($event, 10)"
            ></v-text-field>
          </div>
        </v-row>
      </v-row>
    </template>
  </v-data-iterator>
</template>
</div>
</template>
<script>
data: () => ({
  page: 1,
  pageCount: 0,
  itemsPerPage: 4,
  ...
})
</script>

Answer 1

您可以创建一个与您的fieldsData长度相同的数组。

示例：

...
  watch: {
    fieldsData (value) {
      this.paginations = value.map(() => ({
        page: 1,
        pageCount: 0
      }))
    }
  }
...

<v-data-iterator
  :items="fieldData.data"
  :page.sync="paginations[index].page"
  :items-per-page="itemsPerPage"
  hide-default-footer
  @page-count="paginations[index].pageCount = $event"
>
...
<v-pagination
  v-model="paginations[index].page"
  :length="paginations[index].pageCount"
></v-pagination>

Fiddle Example

或者，您可以只创建一个新组件(我认为这是一个更好的方法)。

Fiddle Example