Vuetify3中@update:pagination失效，求分页功能替代方案

针对你遇到的@update:pagination事件不触发的问题，下面是几个可行的替代方案，适配大数据分页加载场景（每次加载100条）：

方案1：双向绑定pagination并监听变化 #

Vuetify3的v-data-table需要显式绑定pagination属性才能让@update:pagination正常触发，你当前的代码缺少这一步。定义分页配置变量并双向绑定后，配合watch监听分页变化来触发数据加载：

<template>
  <v-app>
    <v-container>
      <!-- 搜索区域保持不变 -->
      <div class="search-section">
        <div class="search-fields">
          <v-text-field v-model="search" label="ФИО"></v-text-field>
          <v-text-field v-model="birthdateSearch" label="Дата рождения"></v-text-field>
          <v-text-field v-model="studyUidSearch" label="UUID исследования"></v-text-field>
          <v-text-field v-model="studyDateSearch" label="Дата исследования"></v-text-field>
          <v-text-field v-model="modalitySearch" label="Модальность"></v-text-field>
        </div>
      </div>
      <!-- 双向绑定pagination属性 -->
      <v-data-table 
        :items="filteredItems" 
        multi-sort 
        :loading="loading"
        v-model:pagination="pagination"
      >
        <template v-for="header in headers" v-slot:[`header.${header.value}`] :key="header.value">
          <span>{{ header.text }}</span>
        </template>
      </v-data-table>
    </v-container>
  </v-app>
</template>

<script setup>
import { ref, watch } from 'vue';

// 定义分页配置，默认每页100条
const pagination = ref({
  page: 1,
  itemsPerPage: 100
});
const loading = ref(false);
const filteredItems = ref([]);

// 监听分页变化
watch(pagination, async (newPageInfo) => {
  loading.value = true;
  // 这里请求后端数据，传入当前页码和每页条数
  // 示例：const newData = await fetchData(newPageInfo.page, newPageInfo.itemsPerPage);
  // filteredItems.value = [...filteredItems.value, ...newData]; // 大数据场景追加数据
  console.log('切换到第', newPageInfo.page, '页，加载100条数据');
  loading.value = false;
}, { deep: true });
</script>

方案2：使用@page-change专属事件 #

Vuetify3的v-data-table提供了@page-change事件，专门监听页码切换，比@update:pagination更直接，无需手动绑定pagination：

<template>
  <v-data-table 
    :items="filteredItems" 
    multi-sort 
    :loading="loading"
    :items-per-page="100"
    @page-change="handlePageChange"
  >
    <!-- 其余模板内容不变 -->
  </v-data-table>
</template>

<script setup>
const handlePageChange = async (newPage) => {
  loading.value = true;
  // 加载对应页码的100条数据
  console.log('切换到第', newPage, '页');
  loading.value = false;
};
</script>

方案3：自定义分页组件（适合大数据场景） #

如果自带的分页逻辑无法满足需求，可以完全自定义分页控件，手动控制页码和数据加载，避免组件内置逻辑的限制：

<template>
  <v-app>
    <v-container>
      <!-- 数据表格 -->
      <v-data-table 
        :items="filteredItems" 
        multi-sort 
        :loading="loading"
        hide-default-footer
      >
        <!-- 表头内容不变 -->
      </v-data-table>
      <!-- 自定义分页控件 -->
      <v-pagination
        v-model="currentPage"
        :length="totalPages"
        @update:model-value="handleCustomPageChange"
      ></v-pagination>
    </v-container>
  </v-app>
</template>

<script setup>
import { ref } from 'vue';

const currentPage = ref(1);
const totalPages = ref(10); // 根据总数据量计算
const loading = ref(false);
const filteredItems = ref([]);

const handleCustomPageChange = async (newPage) => {
  loading.value = true;
  // 请求第newPage页的100条数据
  // filteredItems.value = await fetchData(newPage, 100);
  console.log('自定义分页：切换到第', newPage, '页');
  loading.value = false;
};
</script>

关键注意点 #

• 大数据分页建议采用追加加载（方案1中注释的方式）而非替换，提升用户体验
• 确保请求后端时传递正确的page和pageSize参数，后端返回对应数据和总页数
• 如果使用自带分页，需设置:items-per-page="100"确保每页显示100条

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