如何在Vuetify中实现分组对象数组的子列表分页？

问题原因 #

分页功能失效的核心原因是所有分组共用同一个全局page变量，点击任意分组的分页按钮时，所有分组的页码会同步变化，无法独立控制每个分组的分页状态。另外计算属性pagedEntities中引用的selectedGroup未定义，且未实际用于分页逻辑。

解决方案 #

为每个分组维护独立的页码状态，通过对象存储不同分组的当前页码，让每个分页控件仅控制对应分组的内容展示。

修改后的完整组件代码 #

<template>
  <div class="">
    <div v-if="entities">
      <div v-for="(item, index) in entities" :key="index">
        <v-card elevation="3" class="pa-4 ma-5">
          <h2 class="text-center mt-5 mb-5">{{ item.groupName }}</h2>
          <div class="d-flex justify-center mb-8">
            <AddEntity class="ml-3" :GName="item.groupName" />
          </div>
          <div class="">
            <!-- 根据当前分组的页码切割数据 -->
            <Entities 
              :entities="item.regulatedEntities.slice((getGroupPage(item.groupName) - 1) * itemsPerPage, getGroupPage(item.groupName) * itemsPerPage)"
              :GName="item.groupName" 
              :regulatedEntities="item.regulatedEntities" 
            />
            <!-- 绑定当前分组的页码到分页控件 -->
            <v-pagination 
              v-model="groupPages[item.groupName]" 
              :length="Math.ceil(item.regulatedEntities.length / itemsPerPage)"
              :total-visible="7" 
              :items-per-page="itemsPerPage"
            ></v-pagination>
          </div>
        </v-card>
      </div>
    </div>
  </div>
</template>

<script>
import Entities from '../entities/Entities.vue'
import AddEntity from '@/components/dialogs/AddEntity.vue'
import { getAllEntities } from '@/components/entities/EntitiesService.js'

export default {
  name: 'Directory',
  components: {
    Entities,
    AddEntity
  },
  data() {
    return {
      searchentity: '',
      fetch_status: "fetching",
      entities: [],
      GNname: "",
      GID: "",
      itemsPerPage: 9,
      // 存储每个分组的页码，默认初始化为1
      groupPages: {}
    }
  },
  mounted() {
    this.getEntities();
  },
  methods: {
    getEntities() {
      getAllEntities().then(response => {
        this.entities = response
        // 初始化每个分组的页码为1
        response.forEach(group => {
          this.$set(this.groupPages, group.groupName, 1)
        })
        this.fetch_status = "success"
      }).catch((error) => {
        this.fetch_status = "failed"
      });
    },
    // 获取指定分组的当前页码，避免直接访问时的undefined问题
    getGroupPage(groupName) {
      return this.groupPages[groupName] || 1
    }
  }
}
</script>

关键修改点 #

1. 新增groupPages对象：用于存储每个分组的独立页码，键为分组的groupName，值为当前页码。
2. 初始化分组页码：在获取数据后，遍历所有分组，用$set初始化每个分组的页码为1（确保响应式）。
3. 绑定分组独立页码：分页控件的v-model绑定到groupPages[item.groupName]，实现每个分页控件仅控制对应分组的页码。
4. 调整数据切割逻辑：根据当前分组的页码对regulatedEntities进行切割，确保每个分组展示对应页的数据。

内容的提问来源于stack exchange，提问作者Wish Creates