Vue 使用 Element 组件实现前端自己的分页功能

Vue 使用 Element 组件实现前端自己的分页功能

当后端没有分页的时候 用 element 中的组件分页并不能对数据进行切割 需要请求回数据后自己来做切割。

<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" :height="100%" style="width: 100%">

currentPage ：当前页数。
pageSize ：每页的数据个数。
slice(n,m) ：查找数组中两个索引之间的内容 返回新数组从n开始不含m。

<!--分页组件-->
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next"
  :total=total>
</el-pagination>

size-change 是pageSize 改变时会触发的函数。
current-change 是currentPage 改变时会触发的函数。

data() {
  return {
    pageSize: 10, // 默认每页展示十条数据
    currentPage: 1, // 默认当前页是第一页
    total: 0, // 初始数据总数是0
  }
}

handleSizeChange(val) {
    this.pageSize = val;
},
handleCurrentChange(val) {
    this.currentPage = val;
}

在获取数据的时候需要把数据总数 total 赋值一下。每次请求新数据的时候记得把total初始0，当前页初始1。

【版权声明】本博文著作权归作者所有，任何形式的转载都请联系作者获取授权并注明出处！

【重要说明】本文为本人的学习记录，论点和观点仅代表个人而不代表当时技术的真理，目的是自我学习和有幸成为可以向他人分享的经验，因此有错误会虚心接受改正，但不代表此刻博文无误！

​

【Gitee地址】秦浩铖：​​https://gitee.com/wjw1014​​