HTML5技术

vue+element-ui实现分页 - WEB前端小菜鸟

字号+ 作者:H5之家 来源:H5之家 2017-11-23 14:05 我要评论( )

按照他的文档来写分页 最主要的是 el-table里面展示的数据怎么处理 el-table :data="AllCommodityList.slice((currentPage-1)*pagesize,currentPage*pagesize)" border (上门这句代码才是重点,下面的都是看他的文档写的, AllCommodityList是我后台去的数

按照他的文档来写分页

最主要的是  el-table里面展示的数据怎么处理

<el-table :data="AllCommodityList.slice((currentPage-1)*pagesize,currentPage*pagesize)" border>
(上门这句代码才是重点,下面的都是看他的文档写的,   AllCommodityList是我后台去的数据, currentPage当前页初始值设置为0
pagesize是当前页要展示多少条数据,默认10 )
补充:slice() 方法可从已有的数组中返回选定的元素。

<!--分页-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total=parseInt(total)>
</el-pagination>
    handleSizeChange(val) {
this.pagesize = val;
// console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.currentPage = val;
},

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • [深度学习]实现一个博弈型的AI,从五子棋开始(1) - xerwin

    [深度学习]实现一个博弈型的AI,从五子棋开始(1) - xerwin

    2017-11-15 12:01

  • vuejs实现本地数据的筛选分页 - 金振宗

    vuejs实现本地数据的筛选分页 - 金振宗

    2017-11-15 09:02

  • 使用原生JavaScript的Canvas实现拖拽式图形绘制,支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多

    使用原生JavaScript的Canvas实现拖拽式图形绘制,支持画笔、线条、箭

    2017-11-09 16:05

  • bootstrapTable的数据后端分页排序 - tzzf

    bootstrapTable的数据后端分页排序 - tzzf

    2017-11-05 10:00

网友点评
h