очень хорошая таблица - 3 запроса к сервису

Question

Я использую объект vue-good-table для рендеринга таблицы в Vue.js.Я использую пейджинг и сортировку на стороне сервера.

Мой код:

     <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, но только в первый раз, когда моя страница загружается.Это ненужно.У меня есть один метод в «смонтированном» разделе, где я загружаю первые 10 результатов (сортировка и разбиение на страницы по умолчанию).Это общеизвестная проблема с vue-good-table?Или, может быть, я должен добавить дополнительный флаг, чтобы не вызывать эти 3 метода без необходимости при загрузке страницы?

Answer 1

Ваш метод onSortChange вызывается при загрузке таблицы, потому что вы создали initialSortBy с конкретными значениями. Чтобы удалить этот вызов juste remove

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

из вашей конфигурации таблицы, но ваш тип сортировки не будет установлен, поэтому я думаю, что это должен быть правильный вызов функции.

onPerPageChange и onPageChange запускаются с помощью конфигурации ниже

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

просто удалите двоеточие перед pagination-options, чтобы получить конфигурацию, подобную этой

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