主页 / coding / 问题 / 79417919
Accepted
1K412
Asked: 2025-02-06 20:33:06 +0800 CST

Vuetify 服务器数据表分页无法正常工作

  • 772

我正在尝试实现一个从 API 请求（响应返回数据和元数据）填充的服务器数据表。

但是，用于转到下一页的分页按钮无法正常工作。当数据加载时，它们会立即启用，然后禁用。后端返回正确的数据，当我快速单击下一页按钮时，会触发 OnPageChange() 并打印下一页 (2)。

我声明 v-data-table 如下：

<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({ page: page, itemsPerPage: itemsPerPage, search: search })"   
        :items-per-page-options="itemsPerPageOptions" 
        :page="page" @update:page="onPageChange">

该脚本具有：

data() {
        return {
            users: [],
            totalItems: 1,
            itemsPerPage: 5,
            page: 1,
            loading: false,
            search: '',
            itemsPerPageOptions: [5, 10, 50],
            ...

methods: {
        async fetchUsers({ page, itemsPerPage, search = this.search }) {
            this.loading = true;

            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;
            }
        },
        onPageChange(newPage) {
            this.page = newPage;
            console.log(newPage);
            this.fetchUsers({
                page: this.page,
                itemsPerPage: this.itemsPerPage,
                search: this.search
            });
        },

vuetify 分页是否存在错误或者我遗漏了什么？

vuejs3

1 个回答

  1. Best Answer

    我可以通过将表声明为v-data-table-server而不是来解决它v-data-table（感谢@MoritzRingler）：

    <v-data-table-server v-model:items-per-page="itemsPerPage" :headers="headers" :items="users"
        :items-length="totalItems" :loading="loading" item-key="id"
        @update:options="fetchUsers({ page: page, itemsPerPage: itemsPerPage, search: search })"
        :items-per-page-options="itemsPerPageOptions" :page="page" @update:page="onPageChange">

    还要确保后端的数据是'total', 'per_page', 'current_page', 'last_page', 'next_page_url', 'prev_page_url'随字段一起发送的。

    • 0

相关问题