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

Question

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

在其中一个页面上，我有一个表，我使用引导分页组件进行分页，所以当用户更改页面时，我会向服务器发送新数据的请求。我将排序和过滤参数存储在Vuex中，它运行良好。

但是，当我想这样保存当前页面时，每次更改视图并返回时，引导分页都会将其更改为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();
},
}

Answer 1

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

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

这会导致问题，因为分页会认为有0行。所以当你把它设置到第5页时。它将检查perPage和totalRows属性，由于还没有第5页，它将自动将currentPage设置回第1页。

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

Answer 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>