1:vue项目使用的是iview组件库,引入方法在这里就不介绍了
2: 这是iview Page的官方文档 https://www.iviewui.com/components/page
3:具体使用的方法及参数
<Page
:total="tableTotal"
:current="pageIndex"
:page-size="pageSize"
show-total
show-sizer
@on-change="tablePageChange"
@on-page-size-change="tablePageSizeChange"
></Page>
//current 表示是当前页码
//page-size 每页条数
//show-total 显示总数 默认的是false不显示
//show-sizer 显示分页 默认的是false 不显示
// @on-change 页码改变的回调,返回改变后的页码
// @on-page-size-change 切换每页条数时的回调,返回切换后的每页条数
//以下是初始化时的一些值
tableTotal: 0, //数据总数
pageIndex: 1, //当前页码
pageSize: 10, //每页条数
4:当获取到接口数据时按照后台返回的参数代入即可
if (res.data.state == 1) {
let rowData = res.data.data;
this.tableData = rowData;
this.tableTotal = this.tableData.length;
this.tableTotal = res.data.total;
5:页面的样式