1：前端手写分页（数据量小的情况下）
前端需要使用slice截取： tableData.slice（（page-1）pageSize,pagepageSize），这段也可以直接写在计算属性computed中
2：后端分页，前端只需要关注传递的page和pageSize了，这里就不一一赘述了
3：前端手写分页按钮
<body>
<div id="app">
<table class="table table-bordered table-condensed">
<tr class="bg-primary">
<th class="text-center">排序</th>
<th class="text-center">用户姓名</th>
<th class="text-center">用户性别</th>
<th class="text-center">所在城市</th>
</tr>
<tr class="text-center active" v-for="（v,i） in list" :key="i">
<td>{{num（i）}}</td>
<!-- <td>{{params.pagesize}}</td> -->
<td>{{v.name}}</td>
<td>{{v.sex}}</td>
<td>{{v.addr}}</td>
</tr>
</table>
<nav aria-label="Page navigation" style="text-align: center;">
<ul class="pagination">
<!-- 上一页 -->
<li @click="prePage（）" :class="{'disabled':params.page == 1}">
<a aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li :class="{'active': params.page == page}" v-for="（page,index） in pages" :key="index" @click="curPage（page）">
<a style="cursor: pointer;">
{{page}}
</a>
</li>
<!-- 下一页 -->
<li :class="{'disabled':params.page == totalPage}" @click="next（）">
<a aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</body>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h64814.shtml
