vue如何实现表格分页功能

魁首哥

作者

vue如何实现表格分页功能

这篇文章给大家分享的是有关vue如何实现表格分页功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

具体内容如下

直接上代码：

这里是这里是template部分，主要由一个需要分页的表格和一个分页器组成。重点在于表格的data属性用到了一个slice截取方法。

<el-tablev-loading="listLoading":data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)"element-loading-text="Loading"highlight-current-rowborder><el-table-columnalign="center"label="序号"width="90"><templateslot-scope="scope">{{scope.$index+1}}</template></el-table-column><el-table-columnlabel="头像"align="center"width="150"><templateslot-scope="scope"><el-avatar:src="scope.row.avatar"></el-avatar></template></el-table-column><el-table-columnalign="center"label="UID"width="130"><templateslot-scope="scope">{{scope.row.UID}}</template></el-table-column><el-table-columnalign="center"label="用户名"width="350"><templateslot-scope="scope">{{scope.row.username}}</template></el-table-column><el-table-columnalign="center"label="游戏ID"width="350"><templateslot-scope="scope">{{scope.row.usernick}}</template></el-table-column><el-table-columnlabel="授权类型"width="110"align="center"><templateslot-scope="scope"><el-tag:type="scope.row.authorizationType|tagTypeFilter">{{scope.row.authorizationType|authorizationTypeFilter}}</el-tag></template></el-table-column><el-table-columnalign="center"label="成功邀请人数"width="150"><templateslot-scope="scope">{{scope.row.successNum}}</template></el-table-column></el-table><divclass="block"><el-paginationalign="right"@current-change="handleCurrentChange":current-page="currentPage":page-size="pageSize"layout="prev,pager,next,total"background:total="filterList.length"hide-on-single-page></el-pagination></div>

这里是javascript部分：

exportdefault{data(){return{currentPage:1//当前页码pageSize：10//每页显示条数list:[]//要显示的表格数据}}methods{handleCurrentChange(val){this.currentPage=val;},}}

实现如图效果