Vuetify服务端数据表格分页异常问题求助

你的分页按钮异常是因为重复的事件监听导致状态冲突，同时初始值设置也可能影响分页按钮的初始状态判断，并非Vuetify的bug。

核心问题点 #

1. 同时监听了@update:page和@update:options两个事件，分页变化时会重复调用fetchUsers，导致表格分页状态计算混乱，出现按钮先启用后禁用的情况。
2. totalItems初始值设为1，会让Vuetify默认判断只有1页数据，初始状态下禁用分页按钮，后续请求完成后的状态更新可能被重复请求干扰。

修改步骤 #

1. 简化表格事件绑定

移除@update:page和对应的onPageChange方法，只保留@update:options——该事件会自动监听分页、每页条数的变化，无需单独处理分页切换：

<v-data-table 
        v-model:items-per-page="itemsPerPage" 
        :headers="headers" 
        :items="users"
        :server-items-length="totalItems" 
        :loading="loading" 
        item-key="id"           
        @update:options="fetchUsers"   
        :items-per-page-options="itemsPerPageOptions" 
        :page="page">
</v-data-table>

2. 调整fetchUsers方法逻辑

直接接收update:options传递的参数，同步更新page变量，确保表格状态一致：

async fetchUsers(options) {
    const { page, itemsPerPage } = options;
    this.loading = true;
    this.page = page; // 同步表格分页状态

    try {
        const response = await axios.get(`/users`, {
            params: {
                page,
                per_page: itemsPerPage,
                search: this.search.trim() || '',
            },
        });

        this.users = response.data.data;
        this.totalItems = response.data.meta.total;

    } catch (error) {
        console.error('Error fetching users:', error);
    } finally {
        this.loading = false;
    }
}

3. 修正初始值

将totalItems初始值改为0，避免初始状态下错误禁用分页按钮：

data() {
    return {
        users: [],
        totalItems: 0,
        itemsPerPage: 5,
        page: 1,
        loading: false,
        search: '',
        itemsPerPageOptions: [5, 10, 50],
        // ...其他数据
    }
}

4. 移除冗余方法

删除onPageChange方法，因为已经通过update:options统一处理分页和每页条数变化。

验证逻辑 #

修改后，分页切换或调整每页条数时，update:options会自动传递最新的分页参数，fetchUsers根据参数请求数据并更新表格状态，Vuetify会根据totalItems、page、itemsPerPage正确计算分页按钮的启用/禁用状态。

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