elemen 表格分页方法(非接口传参)

表格分页方法(非接口传参)

一般请求接口时会加上

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>

这样分页就完成了

在这里插入图片描述
在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值