分页不适用于 vue-good-table 中的搜索答案

【问题标题】：Pagination not working with search in vue-good-table分页不适用于 vue-good-table 中的搜索
【发布时间】：2020-04-16 07:14:19
【问题描述】：

我正在使用 Vue-good-table 远程搜索，我在第二页搜索时遇到了问题。搜索页面自动设置为第二页，但分页设置为第一页。我尝试通过setCurrentPage 手动设置页面，但它不起作用。这是我的代码。

<vue-good-table
  mode="remote"
  :line-numbers="true"
  :search-options="{
    enabled: true,
    placeholder: 'Search this table',
     searchFn: searchTbl
   }"
  :select-options="{
     enabled: true,
     selectionInfoClass: 'table-alert__box'
   }"
  :pagination-options="{
     enabled: true,
     mode: 'records'
   }"
   style-class="tableOne vgt-table"
  :rows="rows"
  @on-selected-rows-change="selectionChanged"
  :columns="columns"
  @on-page-change="onPageChange"
  :total-rows="totalRecords"
  @on-sort-change="onSortChange"
  @on-column-filter="onColumnFilter"
  @on-per-page-change="onPerPageChange"
  @on-search="searchTbl"
  >
  <div slot="table-actions" class="mb-3">
    <b-button class="form-btn" type="submit" variant="success" @click="loadItems">Refresh</b-button>
  </div>
  <div slot="selected-row-actions" class="mb-3">
     <b-button variant="danger">Delete</b-button>
  </div>

  <template slot="table-row" slot-scope="props">
    <span v-if="props.column.field == 'button'">
      <a href @click.prevent="editRecord(props.row)">
        <i class="i-Eraser-2 text-25 text-success mr-2" />
        {{ props.row.button }}
      </a>
      <a href @click.prevent="confirmMsg(props.row)">
        <i class="i-Close-Window text-25 text-danger" />
        {{ props.row.button }}
      </a>
    </span>
  </template>
</vue-good-table>

data() {
            return {
                pagination:{
                    enabled: true,
                    mode: 'records',
                    setCurrentPage: 1,
                }
             }
      }

这是对表函数的搜索和数据加载，使用loadItems 函数我正在设置setCurrentPage 值并且它设置正确。

    searchTbl(searchTerm){
                this.updateParams({
                    columnFilters: {
                        search: searchTerm,
                    },
                });
                this.loadItems()
            },
            loadItems() {
                this.pagination.setCurrentPage = this.ahStore.tblData.currentPage;

                console.log(this.pagination.setCurrentPage)
                this.$store.dispatch('getFromServer', this.serverParams)
                    .then((response) => {
                        this.totalRecords = this.ahStore.tblData.totalRecords;
                        this.rows = this.ahStore.tblData.rows;
                    })
                    .catch((err) => {
                        console.log(err)

                    });
            },

【问题讨论】：

标签： vue.js vue-good-table

【解决方案1】：

我做了一个简单的解决方案，只需将this.serverParams.page = 1 与searchTbl 函数一起传递。现在它会自动设置为第一页。

【讨论】：