时间戳

首页 > 解决方案 > vue good table - 对服务的 3 个请求

vue.js - vue good table - 对服务的 3 个请求

问题描述

我使用 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 个方法？

标签： vue.jsvuejs2vue-good-table

解决方案

您的onSortChange方法在表加载时被调用，因为您使用了initialSortBy特定值。要删除此调用 juste remove

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

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

onPerPageChange和onPageChange由下面的配置触发

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

只需删除冒号之前pagination-options就有这样的配置

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

推荐阅读