Vue分页固定底部显示4个页码不生效问题排查求助

问题排查 #

• 问题1：同时存在两套分页渲染逻辑，你手写了v-for循环生成页码的逻辑，又引入了第三方<pagination>组件，两者同时渲染导致页码数量超出预期。
• 问题2：手写的页码显示区间计算错误，你当前的判断条件p >= (filter.page-3) && p <= (filter.page+3)覆盖了前后共7个页码，和你要固定4个的需求不符，且没有做边界处理，在首页、末页时会出现无效的页码区间。
• 问题3：<pagination>组件语法错误，标签未闭合、v-if="pagination.@{{p}} >1"属于无效语法（模板插值不能写在指令属性内），导致组件没有正常初始化，你设置的offset=4根本没有生效。

修复方案 #

方案1：使用第三方pagination组件实现 #

删除手写的v-for生成页码的部分，修正组件语法即可生效：

<div class="text-center" v-if="totalPage > 1">
    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item" :class="{disabled:filter.page <= 1}">
                <a class="page-link" v-if="filter.page <=1">{{__("Previous")}}</a>
                <a class="page-link" href="#" v-if="filter.page > 1" v-on:click="changePage(filter.page-1,$event)">{{__("Previous")}}</a>
            </li>
            <pagination v-if="pagination.total >1" :pagination="pagination" :offset="4" @paginate="fetchPosts()"></pagination>
            <li class="page-item" :class="{disabled:filter.page >= totalPage}">
                <a v-if="filter.page >= totalPage" class="page-link">{{__("Next")}}</a>
                <a href="#" class="page-link" v-if="filter.page < totalPage" v-on:click="changePage(filter.page+1,$event)">{{__("Next")}}</a>
            </li>
        </ul>
    </nav>
</div>

方案2：手写逻辑实现固定4个页码 #

删除第三方pagination组件，调整页码生成逻辑即可：

<div class="text-center" v-if="totalPage > 1">
    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item" :class="{disabled:filter.page <= 1}">
                <a class="page-link" v-if="filter.page <=1">{{__("Previous")}}</a>
                <a class="page-link" href="#" v-if="filter.page > 1" v-on:click="changePage(filter.page-1,$event)">{{__("Previous")}}</a>
            </li>
            <li class="page-item" 
                v-for="p in getPageRange()" 
                :class="{active: p == filter.page}" 
                @click="changePage(p,$event)">
                <a class="page-link" href="#">@{{p}}</a>
            </li>
            <li class="page-item" :class="{disabled:filter.page >= totalPage}">
                <a v-if="filter.page >= totalPage" class="page-link">{{__("Next")}}</a>
                <a href="#" class="page-link" v-if="filter.page < totalPage" v-on:click="changePage(filter.page+1,$event)">{{__("Next")}}</a>
            </li>
        </ul>
    </nav>
</div>

在JS部分新增计算页码区间的方法：

methods: {
  getPageRange() {
    const total = this.totalPage
    const current = this.filter.page
    let start = Math.max(1, current - 1)
    let end = start + 3
    if (end > total) {
      end = total
      start = Math.max(1, end - 3)
    }
    return Array.from({length: end - start + 1}, (_, i) => start + i)
  }
}

内容的提问来源于stack exchange，提问作者user16793065