Vue2.0--Vue分页--Vue分页组件-- 仿京东分页插件

最新推荐文章于 2023-03-28 19:55:34 发布

生鲜电商APP开发

最新推荐文章于 2023-03-28 19:55:34 发布

阅读量292

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_48474188/article/details/107854410

版权

本文介绍如何在Vue2.0中创建一个分页组件，模仿京东分页样式。通过接收currentPage、totalPage和totalElements参数，并提供getData方法获取数据，实现灵活的数据分页。附带引用示例和截图。

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

最近项目需要弄个Vue分页的组件,在这里分享下给大家,不多说上代码

<template>
  <div class="pagination">
    <div class="count">
      共
      <span class="red">{
  {totalPage}}</span>&nbsp;页
      <span class="red">{
  {totalElements}}</span>&nbsp;条记录
    </div>&ensp;
    <div
      class="page-button page-first"
      :class="{'page-disabled':currentPage <= 1}"
      @click="jump(1)"
    >首页</div>&ensp;
    <div
      class="page-button page-prev"
      :class="{'page-disabled':currentPage <= 1}"
      @click="prev()"
    >上一页</div>&ensp;
    <div
      class="page-button page-nums"
      v-for="(nPage,index) in pageNumbers"
      :key="index"
      :class="{currentPage:nPage+pageOffset=&