element-puls分页功能实现

简介: element-puls分页功能实现

element-puls有分页组件,这里将教大家如何和后端接口对接分页。



就上面所标记的分页组件,对组件所用的参数和业务进行解释,话不多说,看代码



1,:current-page,当前是第几页,这个绑定一个值,当我们切换页数时,所绑定的值state.papenum的值随着改变。


2,:page-sizes,这后面接的是一个数组,数组里的每一项代表着我们对页面能所选的数据进行固定,当前页面只能选择10,15,20,25页展示


3,:page-size,当前列表展示多少条数据


4,:total,总共有多少条数据,一般后端会返回


5,@size-chanse,切换当前页面展示多少条数据时执行,handlesizechange是一个函数,这个函数里请求列表数据,当切换展示多少条数据时,重新请求列表,


6,@current-change,当切换页数时执行里面的函数,在这里面重新执行列表请求,重新获取数据即可。


掌握这几个值后,即可实现基本的列表分页功能,



这里的参数表示当前是第一页,没页展示10条数据,可以将这里的参数于组件所绑定的参数对照下,就能明白是如何使用element-puls的分页组件了

相关文章
|
4月前
|
前端开发
bladex中自定义分页的写法~
bladex中自定义分页的写法~
|
SQL 前端开发 搜索推荐
【Element-UI】实现动态树、数据表格及分页效果
在现代软件开发中,动态树、数据表格以及分页效果成为了许多应用的核心需求。随着业务规模和复杂性的增加,我们往往需要展示大量的层级结构数据,并且实现交互性强且高效的操作。 动态树提供了一种组织结构清晰、可伸缩的展示方式,使用户可以方便地查看和操作树节点。数据表格则是以表格形式呈现数据,在其中用户可以进行排序、筛选、编辑等操作。 而分页效果则能够将大量数据分割成易于管理和浏览的一页或一页的内容。这三种功能的结合,不仅使得我们能够更好地处理庞大的数据集合,同时也使得用户能够快速定位所需信息。 本文将介绍如何使用现代前端技术实现动态树、数据表格及分页
|
4月前
|
JSON JavaScript 前端开发
VUE&Element,能够进行简单的 Element 页面修改, 能够完成查询所有功能, 能够完成添加功能
VUE&Element,能够进行简单的 Element 页面修改, 能够完成查询所有功能, 能够完成添加功能
57 0
|
4月前
|
前端开发 JavaScript
Element纯前端分页处理
Element纯前端分页处理
29 0
|
4月前
|
JSON 数据格式
element ui实现多层级复杂表单的操作(添加与回显)之添加功能实现
element ui实现多层级复杂表单的操作(添加与回显)之添加功能实现
|
前端开发
Echarts实战案例代码(21):front-endPage的CJJTable前端分页插件ajax分页异步加载数据的解决方案
Echarts实战案例代码(21):front-endPage的CJJTable前端分页插件ajax分页异步加载数据的解决方案
78 0
|
4月前
element plus 表各组件怎样和分页组件配合使用
element plus 表各组件怎样和分页组件配合使用
82 0
|
4月前
|
JavaScript
element 分页如何使用
element 分页如何使用
|
JavaScript
element组件中分页的使用
element组件中分页的使用
element分页如何使用
element分页如何使用
140 1