使用vue-pagination实现真分页和假分页

最新推荐文章于 2024-08-20 09:01:39 发布
最新推荐文章于 2024-08-20 09:01:39 发布
阅读量3.4k 收藏 8
点赞数 4
分类专栏： VUE JavaScript 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39530754/article/details/105974641
版权
本文介绍了Vue中使用vue-pagination组件实现真分页和假分页的方法。真分页依赖服务端分页功能，每次请求少量数据，减少数据库访问；假分页则一次性获取所有数据并在客户端进行分页，适用于数据量不大的场景。文章还提到了在有删除操作时如何处理假分页，并给出了详细的代码示例。
摘要由CSDN通过智能技术生成

1、vue-pagination官网介绍

https://panjiachen.github.io/vue-element-admin-site/zh/feature/component/pagination.html#%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F

2、什么是真分页和假分页

假分页：从数据库中取出所有的数据，然后分页在界面上显示。访问一次数据库，但由于选择的数据量比较大，所以第一次花费时间比较长，但之后每一页的显示都是直接、快速的，避免对数据库的多次访问。

真分页：确定要显示的数量和内容，然后每次都去数据库取出该少量数据，优点是数据量小，缺点是访问数据库频繁。在大型网站中往往采用真分页，比如百度的图片获取。

 3、实现真分页（前提是服务端实现了分页功能）

  • 在vue中引入pagination分页组件

  • 不要忘记注册组件： 

最低0.47元/天 解锁文章
繁星、晚风
关注
专栏目录
vue-pagination-2:Vue.js 2分页组件
05-02
使用Vue 3？ 签出 查看其运行情况。 Vue.js版本2的简单，通用且非侵入式分页组件。 依存关系 Vue.js（> = 2.0.0 && <3.0.0）。 必需的。 CSS：Bootstrap 3或Bootstrap 4或Bulma。 安装 NPM npm install vue-...
最全的pagination-vue.js分页
02-15
最全的pagination-vue.js分页。vue.js写的分页，容易使用。利于学习
vue前端假分页
weixin_45852743的博客
10-25 527
前端假分页是因为有时候后端接口不太方便提供分页功能，而前端需要展示大量数据时，为了提高用户体验，需要将数据分页展示。在这种情况下，前端可以通过自己实现一个假的分页效果来达到分页展示数据的目的。假分页的实现方式是在前端将所有数据加载到页面中，然后通过JavaScript代码实现分页效果，即根据用户的点击或滚动等操作，动态地展示不同页码的数据。这种方式虽然不能真正地减少数据的加载量，但可以提高用户的交互体验，让用户更加方便地查看和操作数据。
Vue.js 分页组件指南：使用 vue-pagination-2
最新发布
gitblog_00565的博客
08-20 287
Vue.js 分页组件指南：使用 vue-pagination-2 vue-pagination-2Vue.js 2 pagination component项目地址:https://gitcode.com/gh_mirrors/vu/vue-pagination-2 项目介绍 vue-pagination-2 是一个专为 Vue.js 2.x 设计的轻量级、灵活且易于集成的分页组件。它提供了一...
vue前端实现的假分页
weixin_42332641的博客
03-09 193
当接口速度快，响应数据量大的情况下 页面还未渲染完成时，可能会造成短暂的卡顿，所以做下前端假分页 优化下性能。html部分,和平常写法一样的。
Vue3分页（Pagination）
Mr Dear的博客
03-08 6564
分页组件，支持：双向绑定 page 和 pageSize；设置数据总数；禁用；自定义显示页码数；自定义只有一页时是否隐藏分页；快速跳转至某页；pageSize 切换器；设置每页可以显示多少条；自定义显示数据总量和当前数据顺序；自定义分页展示位置；总之，功能丰富，简单易用😁😁
vue-sliding-pagination:一个滑动分页vue组件
08-04
分页组件的基本用法只需要当前页面、页面总数和在页面更改时调用的处理程序。 分页组件本身不处理页面更改，相反，您需要提供一个页面更改处理程序，该处理程序应包含所有页面更改逻辑（例如 vuex 商店调度），并...
vue-ads-pagination tailwindcssvue-ads-pagination-使用css框架tailwindcss构建的vue分页组件-Vue.js开发
05-27
vue-ads-pagination vue广告分页是vue js分页组件。 在左侧，您可以找到有关所显示项目的一些信息。 在右侧的vue-ads-pagination中，Vue广告的分页是vue js的分页组件。 在左侧，您可以找到有关所显示项目的一些信息...
（源代码）第03讲：uni-pagination实现表格分页查询
04-26
在本教程中，我们将深入探讨如何使用uni-app框架中的uni-pagination组件来实现表格数据的分页查询。uni-app是一款跨平台的开发工具，允许开发者使用Vue.js语法编写一次代码，部署到多端，如iOS、Android、H5、微信小...
vuepagination2基于vue的一个分页组件
08-10
基于vue的一个分页组件，参考github上的一个项目做得修改，不算原创，方便结合vuex使用
Vue_Pageination
05-15
插件描述：基于jQuery的分页插件大家都用过很多了吧，今天分享一下基于Vue的分页插件pagination.js。详细使用请查看：https://blog.csdn.net/ganquanzhong/article/details/80320748
Vue.js 组件实现分页效果
03-14
为了练习vue.js 之前做了一个vue.js前端分页效果，后面看到vue.js组件内容，就试着把这个功能写成一个简单组件，向组件元素传递一个object参数，包含分页数据，显示的列名信息，分页信息，组件提供一个事件，传递给父元素一个分页信息，父元素拿着分页信息获取数据，修改之前的object。这样就实现了分页效果。
Vue.js实现一个自定义分页组件vue-paginaiton
12-28
vue实现一个分页组件vue-paginaiton vue使用了一段时间的感触就是，我再也不想直接操作DOM了。数据绑定式的编程体验真是好。实现的一个分页组件。 这里的css就不放出来了，可以看直接去github上下载：vue-pagination 先上一张实例图吧 模版 <div class=page-bar> <ul> <li v-if=showFirstText><a></li> <li xss=removed> <a>{{
基于vue实现假分页
halo1416的博客
02-10 2253
一、 前言 分页对于前端开发而言，是一个经常遇见也比较简单的功能。常见的处理方式是结合后端接口处理即可。 但偶尔有时候后端接口不太方便提供该功能时，我们可以自己通过前端实现一个假的分页效果！ 二、实现代码 其主要实现和传统的分页（如element提供的分页组件）区别在于对 current-change（页码）改变时的处理 传统分页：在current-change回调时间中，拿到最新的页码，重新请求接口即可 自己实现假分页：在current-change回调时间中，拿到最新的页码，去从所以的列表数据中截取出
Vue2分页（Pagination）
Mr Dear的博客
07-12 9121
Vue2+js+less实现的分页器组件
vue 假分页
weixin_45345105的博客
10-28 776
因某原因，后端一次性返回所有数据，无分页字段，只能自己实现假分页。 需要准备俩个数组。一个展示，一个分割 最初获取数据的时候 if(this.tableData.length > 0){ let temp = JSON.stringify(this.tableData) this.pageList = JSON.parse(temp) this.pageList = this.pageList
Vue3 element-ui实现Pagination分页组件--封装分页
热门推荐
coinisi_li的博客
02-09 1万+
而且它自己里面已经封装的很好了，只需要简单的调用作用在标签上的函数就能够实现平滑的滚动，用起来非常的简便。假分页:一开始从后端发送请求获取所有的数据，前端通过在组件的方式对数据进行分页，再点击分页的按钮的时候，数据其实已经在浏览器缓存的缓存中了，不需要再请求后端接口。3、注册本地组件，并且因为在添加标签的时候，绑定的有属性和方法，所以要对属性进行声明，以及方法的实现。真分页：当你目前在首页的时候，点击“第二页”或“下一页”的时候，会重新向后端发送请求，请求第二页的数据。
vue-awesome-swiper vue2 使用分页器.swiper-pagination，居中
03-23
在Vue中使用vue-awesome-swiper插件，并使用分页器(swiper-pagination)居中的方法如下： 1. 首先，确保你已经安装了vue-awesome-swiper插件。可以通过npm或yarn进行安装： ``` npm install vue-awesome-swiper --save ``` 2. 在你的Vue组件中，引入vue-awesome-swiper插件并注册： ```javascript import 'swiper/css/swiper.css'; import { swiper, swiperSlide } from 'vue-awesome-swiper'; export default { components: { swiper, swiperSlide }, // ... } ``` 3. 在模板中使用swiper组件，并设置pagination参数为true，同时设置pagination参数的其他属性来实现居中效果： ```html <template> <div> <swiper :options="swiperOptions"> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> <!-- 其他slide... --> <!-- 分页器 --> <div class="swiper-pagination" slot="pagination"></div> </swiper> </div> </template> <script> export default { data() { return { swiperOptions: { pagination: { el: '.swiper-pagination', clickable: true, dynamicBullets: true, dynamicMainBullets: 2, centeredSlides: true, // 分页器居中 }, // 其他swiper配置项... } } } } </script> <style> .swiper-pagination { text-align: center; // 分页器居中样式 } </style> ``` 这样，你就可以在Vue中使用vue-awesome-swiper插件，并将分页器(swiper-pagination)居中显示了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值