表格分页方法(非接口传参)
一般请求接口时会加上
url:'....',
data:{
page: this.queryForm.pageNo,//第几页
limit: this.queryForm.pageSize,//一页多少条数据
...
}
当请求的是没有这些参数,等到的是一大堆数据时,就需要前端处理分页
-
就会像这样全部显示没有进行分页
-
处理方法只需要在你获得的数组后添加一个截取方法
data.slice((queryForm.pageNo - 1) * queryForm.pageSize, queryForm.pageNo * queryForm.pageSize)
-
slice(0,10)
字符串截取方法,(queryForm.pageNo - 1) * queryForm.pageSize
为开始截取的索引,queryForm.pageNo * queryForm.pageSize)
为结束时的索引,每当queryForm.pageNo
页数也就跟着改变了。
<el-table class="table-container" ref="tableSort"
:data="list.slice((queryForm.pageNo - 1) * queryForm.pageSize, queryForm.pageNo * queryForm.pageSize)"
:element-loading-text="elementLoadingText"
@selection-change="setSelectRows"
@sort-change="tableSortChange">
<el-table-column show-overflow-tooltip label="排序" width="95" type="index" :index="indexMethod" align="center"></el-table-column>
<el-table-column show-overflow-tooltip prop="dateline" label="时间" align="center"></el-table-column>
<el-table-column show-overflow-tooltip label="店铺名" align="center">{{ store_title ? store_title : '平台数据' }}</el-table-column>
</el-table>
这样分页就完成了