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

最新推荐文章于 2024-06-18 08:22:01 发布
最新推荐文章于 2024-06-18 08:22:01 发布
阅读量3.4k 收藏 8
点赞数 4
分类专栏： VUE JavaScript 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39530754/article/details/105974641
版权

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元/天 解锁文章
繁星、晚风
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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-...
vue3 使用 Element-plus 的 el-pagination 实现前端分页
Roy__Jason的博客
08-11 4582
vue3 使用 Element-plus 的 el-pagination 实现前端分页
【区分vue2和vue3下的element UI Pagination 分页组件，分别详细介绍属性，事件，方法如何使用，并举例】
最新发布
xiejunlan的博客
06-18 759
在 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中，Pagination 分页组件的功能和用法大部分相似，但也有一些细节上的差异。以下是对两个版本下 Pagination 组件的属性、事件和方法的详细介绍，并给出使用示例。
vue-element-Pagination 分页 实现页面刷新
weixin_46519331的博客
09-07 1053
element-Pagination 分页-用法
AntdesignVue 使用a-pagination实现假分页
朝花夕拾的博客
06-06 611
因为slice不改变原数组 可以截取想要的数据 splice改变原数组不能用。pageSize默认5条 改变当前页和条数时 双向绑定渲染数据。假分页就是只查询一次数据库 把数据放到一个数组中。用slice函数进行操作。这里默认显示5条一页。
基于vue3+el-pagination实现表格分页效果
m0_58991732的博客
07-19 2310
vue3+element-plus为咱们前端开发带来了极大的便捷。
Vue3 element-ui实现Pagination分页组件--封装分页
coinisi_li的博客
02-09 1万+
而且它自己里面已经封装的很好了，只需要简单的调用作用在标签上的函数就能够实现平滑的滚动，用起来非常的简便。假分页:一开始从后端发送请求获取所有的数据，前端通过在组件的方式对数据进行分页，再点击分页的按钮的时候，数据其实已经在浏览器缓存的缓存中了，不需要再请求后端接口。3、注册本地组件，并且因为在添加标签的时候，绑定的有属性和方法，所以要对属性进行声明，以及方法的实现。真分页：当你目前在首页的时候，点击“第二页”或“下一页”的时候，会重新向后端发送请求，请求第二页的数据。
el-pagination 纯前端分页
余白x的博客
12-04 804
实现思路：先把数据存储到一个大数组中，然后调用方法进行切割。主要使用数组的slice方法。需求：后端把所有数据都返给前端，前端进行分页渲染。
vue el-pagination 实现分页操作
且听风吟的博客
08-12 5809
项目中用到了表格分页，所以总结了一下：
vue开发 使用element的el-pagination分页组件
weixin_48596030的博客
05-24 288
实现思路：获取到列表的所有数据，然后对数据进行处理，紧接着操作分页。//切换每页条数容量。
vue使用ElementUI el-pagination实现分页
qq_41600027的博客
09-01 450
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="filter.page" :page-sizes="[10, 15, 30, 50, 100, 200]" :page-size.sync="filter.size" la
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、微信小...
vue-pagination：与引导程序和Laravel分页相结合的vuejs分页
01-31
语音分页Vue分页组件，用于Bootstrap和Laravel分页。 （经过2.2.1测试）。 （已通过3.3.7测试） 要与Vue.js 1一起使用，请使用1x版本。 只要分页对象包含必需的属性，就不需要Laravel 当前页面， 最后一页， 每页，...
VUE如何element-ui自带的富文本编辑器
热门推荐
繁星、晚风
04-18 2万+
1、npm安装编辑器组件 npm install vue-quill-editor –save 2、完成以后在main.js引入 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill...
VUE踩坑——在项目中安装依赖模块npm install报错no such file or directory
繁星、晚风
05-04 7113
解决办法： 将no such file or directory,access中指明的文件路径中的node_modules删除： rm -r node_modules或者直接在在项目文件夹中删除 然后再重新npm install 安装 重新npm install 安装结果如下： npm install --registry=https://registry.npm.taoba...
VUE项目打包发布到tomcat服务器上运行
繁星、晚风
05-08 4189
1、项目打包路径配置 将绝对路径改为相对路径 目标文件：项目目录 > config文件夹 > index.js assetsPublicPath:'/' 改为：assetsPublicPath:'./' （加一个点变为相对路径） 2、配置背景图片等静态文件打包路径 打包后的css文件夹内app.css文件访问static/img/’图片名’路径错误访问不到图片，在build文件内utils.js中配置路径。 目标文件：项目目录 > build文件夹 >uti..
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、付费专栏及课程。

余额充值