Question

我正在使用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)

                    });
            },

Answer 1

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

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

1 个答案: