vue2自定义分页组件，可设置每页显示数量，指定跳转具体页面

最新推荐文章于 2024-08-09 10:46:42 发布

「已注销」

最新推荐文章于 2024-08-09 10:46:42 发布

阅读量1w

点赞数 2

分类专栏： web前端文章标签： vue.js js

本文链接：https://blog.csdn.net/yangwei282367751/article/details/82722840

版权

本文介绍如何在Vue2中创建一个自定义分页组件，该组件允许用户设置每页显示的数量，并能直接跳转到指定的页面。通过这个组件，可以灵活地在父页面中实现高效的分页功能。

摘要由CSDN通过智能技术生成

分页组件
<template>
  <div>
    <div class="page-helper" v-if="showPageHelper">
      <div class="page-list">
        <span>共{
  { totalPage }}页 / {
  { totalCount }}条</span>
        <span class="page-item" @click="jumpPage(1)">首页</span>
        <span class="page-item" :class="{'disabled': currentPage === 1}"  @click="prevPage">上一页</span>
        <span class="page-ellipsis" v-if="showPrevMore" @click="showPrevPage">...</span>
        <span class="page-item" v-for="num in groupList" :class="{'page-current':currentPage===num}" :key="num"
              @click="jumpPage(num)">{
  {num}}</span>
        <span class="page-ellipsis" v-if="showNextMore" @click="showNextPage">...</span>
        <span class="page-item" :class="{'disabled': currentPage === totalPage}" @click="nextPage">下一页</span>
        <span class="page-item" @click="jumpPage(totalPage)">末页&