vue good table - 3 个服务请求

Question

我使用 vue-good-table 对象在 Vue.js 中渲染 table。我在服务器端使用分页和排序。

我的代码：

     <vue-good-table v-if="authorizations"
                                    id="AuthorizationsTable"
                                    ref="refToAuthorizationsTable"
                                    @on-page-change="onPageChange"
                                    @on-sort-change="onSortChange"
                                    @on-column-filter="onColumnFilter"
                                    @on-per-page-change="onPerPageChange"
                                    mode="remote"
                                    :columns="columns"
                                    :rows="authorizations"
                                    :totalRows="totalRecords"
                                    :pagination-options="{
                                    enabled: true,
                                    mode: 'pages',
                                    nextLabel: 'następna',
                                    prevLabel: 'poprzednia',
                                    ofLabel: 'z',
                                    pageLabel: 'strona',
                                    rowsPerPageLabel: 'wierszy na stronie',
                                    allLabel: 'wszystko',
                                    dropdownAllowAll: false
                                    }"
                                    :sort-options="{
                                        enabled: true,
                                        initialSortBy: {
                                            field: 'id',
                                            type: 'asc'
                                        }
                                    }">


    (...)
export default {
        name: 'AuthoritiesAdministration',
        components: {},
        data() {
            return {
                totalRecords: 0,
                serverParams: {
                    columnFilters: {},
                    sort: {
                        field: 'id',
                        type: 'asc'
                    },
                    page: 1,
                    perPage: 10
                },
                rows: [],
                columns: [
                    {
                        label: 'ID',
                        field: 'id',
                        type: 'number',
                        tdClass: 'vue-good-table-col-100'
                    },
                    {
                        label: 'Data wystawienia',
                        field: 'issueDate',
                        formatFn: this.formatDate,
                        tdClass: 'vue-good-table-col-200',
                    },
                    {
                        label: 'Nazwa operatora',
                        field: 'operator',
                        sortable: true,
                        formatFn: this.formatOperatorName,
                    },
                    {
                        label: 'Login',
                        field: 'operator.login'
                    },
                    {
                        label: 'Spółka',
                        field: 'company.description',
                        type: 'text',
                    },
                    {
                        label: 'Data ważności',
                        field: 'endDate',
                        type: 'text',
                        formatFn: this.formatDate,
                    },
                    {
                        label: 'Akcje',
                        field: 'btn',
                        tdClass: 'vue-good-table-col-250',
                        sortable: false
                    }
                ],
            }
        },
(...)

     methods: {
        updateParams(newProps) {
            this.serverParams = Object.assign({}, this.serverParams, newProps);
        },
        onPageChange(params) {
            this.updateParams({page: params.currentPage});
            this.loadAuthorizations();
        },
        onPerPageChange(params) {
            this.updateParams({
                perPage: params.currentPerPage
            });
            this.loadAuthorizations();
        },
        onSortChange(params) {
            this.updateParams({
                sort: {
                    type: params[0].type,
                    field: params[0].field
                }
            });
            this.loadAuthorizations();
        },
        onColumnFilter(params) {
            this.updateParams(params);
            this.loadAuthorizations();
        },
        loadAuthorizations() {
            getAllAuthorizationsLightWithPagination(this.$store.getters.loggedUser.token, this.serverParams).then(response => {
                this.totalRecords = response.data.totalRecords;
                this.rows = response.data.authorizations;
            }).catch(err => {
                this.$showError(err, true);
            });
        },

我注意到向服务器发送了 3 个请求，而不是 1 个：调用了 onPageChange、onPerPageChange 和 onSortChange 等方法，但仅在第一次加载我的页面时。这是不必要的。我在 "mounted" 部分有一个方法，我加载前 10 个结果（默认排序和分页）。这是 vue-good-table 常见的众所周知的问题？或者也许我应该添加一个额外的标志，以便在加载页面时不会不必要地调用这 3 个方法？

Answer 1

您的 onSortChange 方法在 table 加载时被调用，因为您创建了具有特定值的 initialSortBy。要删除此调用 juste remove

initialSortBy: {
  field: 'id',
  type: 'asc'
}

来自你的table配置，但你的排序不会被设置，所以我认为这应该是一个合法的函数调用。

onPerPageChange 和 onPageChange 由下面的配置触发

:pagination-options="{
  enabled: true,
  ...
}

只需删除 pagination-options 之前的冒号即可获得这样的配置

pagination-options="{
  enabled: true,
  ...
}

vue good table - 3 个服务请求

vue good table - 3 requests to the service

vue.js

vuejs2

vue-good-table