vue.js - vue-good-table - 单击排序按钮时自动重新加载页面

Question

我使用 vue-good-table 对象在 Vue.js 中呈现表格。我使用排序服务器端。

版本：

Vue-good-table：2.21.10，

Vue：2.6.12

---

我的代码：

<vue-good-table
      mode="remote"
      :columns="columns"
      :rows="customers"
      style-class="vgt-table bordered"
      :pagination-options="{
        enabled: true,
        perPage: elementSize,
        setCurrentPage: pageNumber,
      }"
      compact-mode
      line-numbers
      :total-rows="customerPagination.totalElements"
      sort-options="{
        enabled: true,
        multipleColumns: true,
        initialSortBy: [{field: 'nameText', type: 'desc'}]
      }"
      @on-sort-change="onSortChange"
      @on-page-change="onPageChange"
      @on-per-page-change="onPerPageChange"
    />

 columns: [
    {
      label: 'Họ tên',
      field: 'nameText',
      firstSortType: 'desc',
      thClass: 'text-left',
      tdClass: 'text-left',
    },
    {
      label: 'Điện thoại',
      field: 'mobiPhone',
      type: 'number',
      thClass: 'text-left',
      tdClass: 'text-left',
    },
    {
      label: 'Ngày sinh',
      field: 'dob',
      type: 'date',
      dateInputFormat: 'dd/MM/yyyy',
      dateOutputFormat: 'dd/MM/yyyy',
      thClass: 'text-left',
      tdClass: 'text-left',
    },
  ],

    updateParams(newProps) {
      this.paginationData = { ...this.paginationData, ...newProps }
    },
    onPageChange(params) {
     this.updateParams({ page: params.currentPage - 1 })
     this.onPaginationChange()
    },
    onPerPageChange(params) {
      this.updateParams({ page: 1, size: params.currentPerPage })
      this.onPaginationChange()
    },
    onSortChange(params) {
      this.updateParams({
       sort: `${params.field},${params.sortType}`,
      })
      this.onPaginationChange()
    },

当我单击排序按钮时，我的网站会自动重新加载，并且它不会运行 onSortChange 功能，但分页工作正常。请帮帮我！

错误原因：我把<vue-good-table />标签放在标签里面<form /> ，所以每次点击排序按钮，网页都会自动重新加载。

解决方案：将<form />标签更改为<div />标签。

标签： vue.jssortingvuejs2vue-good-table