您现在的位置是：网站首页> 编程资料编程资料

基于el-table和el-pagination实现数据的分页效果_vue.js_

2023-05-24 231人已围观

简介基于el-table和el-pagination实现数据的分页效果_vue.js_

（14 条数据每页显示 6 条，共 3 页。）

1. el-table 表格存放数据

注意此处在选择要显示的数据时也需要对其进行截取操作，否则会直接全部显示。我们使用的是 slice(start,end) 截取数组，其中不包括 end；

:data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"

每页数据量 pageSize 为 6， currentPage 为当前页；比如第一页，那么截取的就是 0 ~ 6，slice 返回的是数组副本，所以这个 0 ~ 6 代表下标，就有七条数据，去掉下标为 6 的数据，即为 6 条；后面依次...

参数	说明
background	是否为分页按钮添加背景色
layout	组件布局，子组件名用逗号分隔；prev(上一页按钮)、pager(页码)、nex(下一页按钮)、jumper(跳转)、->(空格)、total(数据总条目数)
current-change	currentPage 改变时会触发
current-page	当前页数
page-sizes	每页显示个数选择器的选项设置

到此这篇关于基于el-table和el-pagination实现数据的分页效果的文章就介绍到这了,更多相关el-table和el-pagination分页内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：vue3+vite中开发环境与生产环境全局变量配置指南_vue.js_