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

目录

• 一、案例效果
• 二、实现步骤&涉及要点
• 2. el-pagination 设置分页效果
• 三、完整代码+详细注释

首先使用 el-table(表格) 和 el-pagination(分页) 组件需要 npm 下载 Element UI 组件库，下载安装方式参见官网：https://element.eleme.cn/#/zh-CN/component/installation

一、案例效果

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

二、实现步骤&涉及要点

1. el-table 表格存放数据

参数	说明
data	显示的数据
stripe	是否以斑马纹显示
prop	对应列内容的字段名，也可以使用 property 属性
label	显示的标题

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

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

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

2. el-pagination 设置分页效果

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

三、完整代码+详细注释

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