如何防止 Bootstrap-Vue 分页自动重置

Posted 2023-02-22

【中文标题】如何防止 Bootstrap-Vue 分页自动重置

【英文标题】：How to prevent Bootstrap-Vue pagination from automatically resetting

【发布时间】：2020-08-19 07:22:41

【问题描述】：

我有多个视图，我想保存每个视图的状态，这样用户就不必再做同样的事情了。

在其中一个上，我有一个表，我使用 bootstrap-pagination 组件进行分页，因此当用户更改页面时，我将请求发送到服务器以获取新数据。我在 Vuex 中存储排序和过滤参数，效果很好。

但是当我想像这样保存当前页面时，每次我更改视图并返回时，bootstrap-pagination 都会将其更改为 1。 是否可以防止这种行为？

以下是 html 代码：

<b-pagination v-if="currentPage!=-1"
            v-model="currentPage"
            :total-rows="totalRows"
            :per-page="perPage"
            aria-controls="my-table"
            pils
            align="center"
            class="ml-auto mr-auto"
          ></b-pagination>

和javascript中的代码：

  data: function () 
      return 
        ...
        currentPage: this.$store.state.currentPage,
        ...
      
    ,

    ...

    watch: 
        currentPage: function()
                this.$store.commit('updateCurrentPage', this.currentPage);
                this.getData();
              ,
    

【参考方案1】：

您面临的问题很可能与数据加载和设置的顺序有关。

当您的组件被初始化时，您立即设置currentPage 页面属性，而（我猜）在从数据库中获取数据之后的某个时间后设置totalRows 属性。

这会导致问题，因为分页会认为有 0 行。因此，当您将其设置为第 5 页时。它会检查 perPage 和 totalRows 属性，并且由于（还没有）第 5 页，它会自动将 currentPage 设置回第 1 页。

相反，我建议您在检索数据并设置totalRows 属性后将currentPage 设置为商店中的值。这应该可以解决您遇到的问题。

【讨论】：

真不幸。使用您的解决方案，我首先设置了totalRows，然后执行了this.$nextTick(() =>，并在回调中设置了我的currentPage。它现在有效。这似乎是一个错误，或者至少是一种气味。

【参考方案2】：

另一种解决方法是在分页元素上放置一个v-if，以检查totalRows 是否已设置。这会导致在知道 totalRows 值之后呈现分页元素。当您使用 AJAX 加载数据并且事先不知道行数时，它很有用。

例如

<b-pagination
  v-if="totalRows > 0"
  v-model="currPage"
  :total-rows="totalRows"
  :per-page="perPage"
  aria-controls="my-table"
  size="sm"
  limit="7"
  first-number
  last-number
  >
</b-pagination>