Vue.js vue良好表-对服务的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);
            });
        },

(...)
导出默认值{
名称：'AuthoritiesAdministration'，
组件：{}，
数据（）{
返回{
总数记录：0，
服务器参数：{
列筛选器：{}，
排序：{
字段：“id”，
类型：“asc”
},
页码：1，
每页：10
},
行：[]，
栏目：[
{
标签：“ID”，
字段：“id”，
键入：“编号”，
tdClass:“vue-good-table-col-100”
},
{
标签：“数据wystawienia”，
字段：“issueDate”，
formatFn:this.formatDate，
tdClass:“vue-good-table-col-200”，
},
{
标签：“Nazwa operatora”，
字段：'运算符'，
可排序：是的，
formatFn:this.formatOperatorName，
},
{
标签：“登录”，
字段：“operator.login”
},
{
标签：“Spółka”，
字段：“company.description”，
键入：“文本”，
},
{
标签：“数据编号为ci”，
字段：“endDate”，
键入：“文本”，
formatFn:this.formatDate，
},
{
标签：“Akcje”，
字段：“btn”，
tdClass:“vue-good-table-col-250”，
可排序：false
}
],
}
},
(...)
方法：{
更新地图（新道具）{
this.serverParams=Object.assign（{}，this.serverParams，newProps）；
},
onPageChange（参数）{
this.updateParams（{page:params.currentPage}）；
这是loadAuthorizations（）；
},
onPerPageChange（参数）{
这是最新的地图({
perPage:params.currentPerPage
});
这是loadAuthorizations（）；
},
onSortChange（参数）{
这是最新的地图({
排序：{
类型：参数[0]。类型，
字段：参数[0]。字段
}
});
这是loadAuthorizations（）；
},
onColumnFilter（参数）{
此。更新图（参数）；
这是loadAuthorizations（）；
},
加载授权（）{
GetAllAuthorizationWithPagination（this.$store.getters.loggedUser.token，this.serverParams）。然后（响应=>{
this.totalRecords=response.data.totalRecords；
this.rows=response.data.authorizations；
}).catch（错误=>{
这个.$showError（err，true）；
});
},

---

我注意到有3个请求发送到服务器，而不是1个：有调用的方法，如onPageChange、onPerPageChange和onSortChange，但只有在第一次加载我的页面时才调用。这是不必要的。我在“mounted”部分有一个方法，加载前10个结果（默认情况下排序和分页）。这是vue good table中常见的、众所周知的问题？或者我是否应该添加一个附加标志，以便在加载页面时不必要地调用这3个方法？

您的

onSortChange

方法在加载表时被调用，因为您使用特定值创建了

initialSortBy

。要删除此调用，只需删除

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

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

下面的配置会触发

onPerPageChange

和

onPageChange

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

只需在

分页选项之前删除冒号，即可获得如下配置

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

你能给你看
data
object吗？@Jérôme-我添加了我的数据object太棒了！你真是Vue JS高手！