在Vue项目中使用Element-UI如何实现一个分页显示效果
创始人
2024-11-19 12:23:14
0次
当我们从后端返回的数据量很大，并且根据需求我们需要将返回的数据全部都显示在页面中，默认情况下会把所有的数据全部显示在一个页面，这样非常影响视觉和页面的使用，所以需要使用分页
我这次使用的是Vue4.0 + Element-UI组件，Element-UI库非常的丰富，它提供了一个分页组件 Pagination
展示效果：这个是获取两个时间段的上机记录
HTML部分：
截止日期 搜索
分页控件的代码如下：
解析：
@size-change:这个是一个方法，当在页面改变每页显示的条数时，会触发该方法
@current-change:点击当前页改变的时候会触发该方法
:current-page:当前页数
:page-sizes:个数选择器的选项设置
:page-size:每页显示的条数
:total:总数据数量
JS代码：