VUE 数据分页
2023-09-27 14:20:30 时间
只要涉及到数据查询,通常我们都会进行分页查询。
假设你的表中有上百万条记录,不分页的话,我们不可能一次性将所有数据全部都载入到前端吧,那前后端都早就崩溃了。
结合 Spring
Spring 和 Vue 都提供了开箱即用的分页功能。
Spring 主要用来处理后端的分页查询,VUE 主要在前端展示页面和进行下一个页面的查询。
有关后端 Spring 如何进行分页查询的方法,请参考:Spring Data @Repository 的分页查询 中的文章。
如果你配置得当,Spring 会将整个查询的页面信息发送给前端。
比如我们说的这一部分,在这部分中,我们会知道总共查询的记录有多少,每一页的大小,一共有多少页,当前是第几页等分页最重要的信息。
VUE
VUE 的前端可以用 Pagination 这个组件 Pagination | Components | BootstrapVue
我们直接在前端调用模板,将参数设置进来就完成了。
代码可以精简到只有下面几句话:
<b-pagination
v-model="pagedData.number"
:total-rows="pagedData.totalElements"
:per-page="pagedData.size"
@click="pageSearch(pagedData.number -1)"
class="pagination pagination-rounded justify-content-end mb-2"
></b-pagination>
不用重复做无用的事情了。
第一个参数是当前的页面是第几页。
第二个参数为一共有多少条记录。
第三个参数为当前分页的页面大小。
第四个参数为,如果页码被单击了,我们会触发一个什么样的函数,通常这个函数就是通过 AJAX 的调用到后台再获取一次数据。
是不是简单到令人发指。
如果没有这个模板的话,我们需要手写分页,还要算页面编码,真心没必要。
如果想使用不同的 CSS 的话,在分页模板中加入自己的 CSS 就可以了。
我们的分页效果为
页面看起来还非常干净喔。
相关文章
- 【Vue 快速入门系列】更新数据页面不渲染问题
- uniapp上滑数据加载跟下拉刷新,配合若依移动端使用,后台使用若依vue前后端分离版,或者能返回数据即可
- 在asp.net mvc应用中使用vue.js
- Vue动态绑定数据
- Vue 中通过事件总线方式组件间传递数据及调用 Vue脚手架中的axios数据调用方式获取github提供的用户接口数据信息
- Vue 数据绑定语法
- vue恢复初始数据
- 精品微信小程序ssm加油服务系统+后台管理系统|前后分离VUE
- vue.js v-bind动态绑定class对象语法
- this指向-作用域、作用域链-预解析 变量提升-Vue组件传值 父子 子父 非父子-Vue数据双向绑定原理
- 解决v-html无法理解vue模版的问题-动态获取模版,动态插入app并使用当下app状态数据需求
- vue数据加载不出来,需要特定操作才能加载问题
- vue项目实战:directives filters mixins util 内容的封装
- 手写MVVM框架 之vue双向数据绑定原理剖析
- vue里的数据
- Vue中的过滤器
- Vue核心①(模板语法、数据绑定、el与data的多种写法)
- 前端vue实现注册功能与正则校验规则
- Vue PC前端扫码登录
- vue 里如何获取 data 中数据的初始状态?
- 从 vue.js 源码角度再看数据绑定
- vue.js(5)学习 值插入(数据绑定)
- vue组件间通信、数据传递(父子组件,同级组件)
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- vue---父调子 $refs (把父组件的数据传给子组件)子调父 $emit (把子组件的数据传给父组件)