项目中遇到分页问题,搜了一些,已经使用上,做个记录

element-ui 中用到的分页器

在el-table中必须要有的一个方法

template 中的代码

 :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)" //在el-bable的行内添加的必须要有哦

  <el-pagination
    background
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="pageSizes"
    :page-size="PageSize"
    layout="total, sizes, prev, pager, next"
    :total="totalCount"
  ></el-pagination>

数据的信息

 // 总数据
//  tableData:[],
// 默认显示第几页
currentPage: 1,
// 总条数，根据接口获取数据长度(注意：这里不能为空)
totalCount: 1,
// 个数选择器（可修改）
pageSizes: [10, 30, 50, 100],
// 默认每页显示的条数（可修改）
PageSize: 10,

method 中的方法

methods: {
// 每页显示的条数
handleSizeChange(val) {
// 改变每页显示的条数
this.PageSize = val;
// 注意：在改变每页显示的条数时，要将页码显示到第一页
this.currentPage = 1;
},
// 显示第几页
handleCurrentChange(val) {
// 改变默认的页数
this.currentPage = val;
},
}

最后需要将请求过来数据的长度赋值给 totalCount
```
 this.totalCount = this.tableData.length
```

项目中遇到前端分页问题

项目中遇到分页问题,搜了一些,已经使用上,做个记录