如何在PrimeVue Paginator组件上以编程方式更改当前页面?

oyt4ldly  于 2023-08-07  发布在  Vue.js
关注(0)|答案(3)|浏览(183)

我可以在PrimeVue Paginator上设置当前页面 prop 吗?
https://primefaces.org/primevue/paginator
我想检测一个查询字符串来设置当前页面
好像没有 prop 可以设置了?
我试了:value:current:current-page
没有人在工作,总是在第一页。


的数据

pbwdgjma

pbwdgjma1#

您可以使用first检索和/或修改当前位置。如果每页有一行:row="1",则first等于page - 1

<Paginator
    v-model:first="first"
    :rows="1"
    :total-records="10"
    />
<Button @click="first = 0">Go to page 1</Button>
<Button @click="first = 2">Go to page 3</Button>

字符串
如果每页显示多行,例如:row="10"你要有一些数学;基本上:first = (page - 1) * rows

<Paginator
    v-model:first="first"
    :rows="10"
    :total-records="100"
    />
<Button @click="first = 0">Go to page 1</Button>
<Button @click="first = 20">Go to page 3</Button>

vom3gejh

vom3gejh2#

刚刚意识到你需要实际告诉Paginator你想跳过多少,而不是计算current page的数学。

<Paginator
    :rows="movieStore.movieLimitCount"
    @page="onPaginate"
    :totalRecords="movieStore.movieCount"
    class="mt-5"
    :alwaysShow="false"
    v-model:first="offset"
  />

<script setup>
const offset = ref(0);
const onPaginate = (e) => offset.value = e.rows * e.page;
</script>

字符串

cwtwac6a

cwtwac6a3#

我通过执行以下代码设法解决了这个问题,记住page变量的初始值为1

<Paginator
        @page="onPage($event)"
        :rows="10"
        :pt="{
          root: (event) => {
            const itemForPage =  10;
            const currentPage =  this.page - 1;
            event.state.d_first = itemForPage * currentPage;
          },
        }"
        v-model:totalRecords="totalPage">

字符串

相关问题