vue实现分页_翻页组件paginator

最新推荐文章于 2024-08-25 22:41:00 发布

苏建康

最新推荐文章于 2024-08-25 22:41:00 发布

阅读量4.2k

点赞数

分类专栏： vue Django

本文链接：https://blog.csdn.net/SJK__/article/details/90454648

版权

本文介绍如何在Vue项目中使用vue-paginator-simple模块轻松创建分页组件。通过安装、引入组件、设置初始值、定义点击事件以及处理后台数据，实现前后台交互的翻页功能。

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

今天做vue翻页，查了好多都很麻烦，我相信一定会有简单的方法，果然，朋友们，往下看
首先进入vue项目里面安装一个模块

cnpm install vue-paginator-simple --save-dev

接下来在你的components文件夹里面创一个paginator.vue组件
在这里插入图片描述
在该组件里面复制粘贴上一下代码

<template lang="html">
        <div class="pagination">
            <ul>
                <li :class="{disabled: curPage == 1}" @click="prevPage" v-if="pageCount > 1">上一页</li>
                <li :class="{active: curPage == 1}" @click="page(1)">1</li>
                <li class="ellipsis" v-show="curPage > 5 && pageCount > 10">...</li>
                <li :class="{active: curPage == index+offset}" v-for="(item,index) in middlePages" @click="page(index+offset)">{
  {index+offset}}</li>
                <li class="ellipsis" v-show="curPage < bigLimit && pageCount > 10">...</li>
                <li :class="{active: curPage == pageCount}" @click="page(pageCount)" v-if="pageCount > 1">{
  {pageCount}}</li>
                &l