javascript - vue-tables-2 分页不限制每页数量

Question

我在我的 vue 应用程序中使用 vue-tables-2 作为数据表。
vue-tables-2: ^1.4.70
vue: ^2.6.10
一切都很好，除了每页显示的项目受选项对象上的 perPage 限制。
在这里，我有 5 条记录，我已将每页选项设置为 2。但它不起作用，仍然每页显示 5 条记录。另外，当我单击第二页时，会注意到更改！
这是我的代码：

• 门票.vue：

<template>
    <v-server-table url="/panel/tickets/data" :columns="columns" :options="options"></v-server-table>
</template>
<script>
    export default ({
        name: 'ticketTable',
        data() {
            return {
                columns: ['subject', 'status', 'department', 'date'],
                options: {
                    responseAdapter(data) {
                        return {
                            data,
                            count: data.length
                        }
                    },
                    headings: {
                        subject: 'موضوع',
                        status: 'وضعیت',
                        department: 'دپارتمان',
                        date: 'تاریخ ایجاد'
                    },
                    perPage: 2,
                    pagination: {
                        edge: false,
                        dropdown: false,
                        chunk: 2
                    },
                    filterable: true,
                    sortable: 'subject',
                }
            }
        }
    });
</script>

• 应用程序.js：

import ticketTable from './components/tickets';
import {ServerTable} from 'vue-tables-2';

Vue.use(ServerTable, {
    texts: {
        count: "نمایش {from} تا {to} از {count} رکورد",
        first: 'اولین',
        last: 'آخرین',
        filter: "جستجو : ",
        filterPlaceholder: "جستجو",
        limit: "رکورد:",
        page: "صفحه:",
        noResults: "هیچ نتیجه ای یافت نشد",
        filterBy: "فیلتر با {column}",
        loading: 'در حال آماده سازی...',
        defaultOption: 'انتخاب {column}',
        columns: 'ستون ها'
    }
});

• html:

<section class="mt-4 mb-4">
                <div class="section-title">
                    <h4 class="mb-0">لیست تمام تیکت ها</h4>
                </div>
                <div class="section-content">
                    <ticket-table></ticket-table>
                </div>
            </section>

这是我的结果： 感谢任何帮助。

Answer 1

服务器端方法：
我只是意识到，每次我们单击分页号时，它都会为服务器发送页码和每个页码的项目，并作为响应它得到新的数据数组。静态数据方法：
如果我们在 js 本身中定义我们的数据，表格将处理分页，因为它知道每页的页码和项目。
在数据表中加载数据的最佳实践是使用服务器端方法，因为如果我们有太多数据，它会影响页面加载时间。