js做表格假分页

若非不得已,不建议前端做假分页,下面开始代码吧

<el-table :data='TectableData.slice((currentPageG-1)*pagesizeG,currentPageG*pagesizeG)'>
</el-table>
<el-pagination 
	background 
	@size-change="handleSizeChange" 
	@current-change="handleCurrentChange" 
	:current-page="currentPageG"
	:page-sizes="[5, 10, 20, 40]" 
	:page-size="pagesizeG" 
	layout="total, sizes, prev, pager, next, jumper" 
	:total="TectableData.length">
	<-- TectableData.length表格数据的总条数 -->
</el-pagination>

data() {
    return {
      currentPageG: 1, //初始页
      pagesizeG: 4, //    每页的数据
      TectableData:[],//表格数据
    }
}
// 切换每页条数时
   handleSizeChange: function(size) {
     this.pagesizeG = size;
   },
   // 切换当前页码时
   handleCurrentChange: function(currentPage) {
     this.currentPageG = currentPage;
   },

代码其实到这里就可以结束了,对,正常的就没问题了。
但是!当我做完了这个分页之后,问题就出现了,由于表格最后一行有一个统计行,且是从后端获取的数据,所以这时候页面显示就会有bug了,于是对表格的:data数据做了处理。这里我们通过监听数据的变化来赋值,将每页所需的数据和每页的统计行数据做合并处理,接下来看代码

<el-table :data='dataGap' > 
</el-table> 
computed:{
    dataGap(){
      return Array.from(new Set([...this.TectableData.slice((this.currentPageG-1)*this.pagesizeG,this.currentPageG*this.pagesizeG),...this.newArrG]))
    }  
  },
data() {
    return {
     newArrG:[],//统计行
    }
}

在这里插入图片描述
到这,结束

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值