一篇文章告訴你如何實現Vue前端分頁和後端分頁
阿新 • • 發佈：2022-01-04
目錄
- 1：前端手寫分頁(資料量小的www.cppcns.com情況下)
- 2：後端分頁，前端只需要關注傳遞的page和pageSize
- 總結
1：前端手寫分頁(資料量小的情況下)
前端需要使用slice擷取： tableData((page-1)pageSize,pagepageSize)
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>
window.onload = function () {
// 1s內只允許傳送請求(出發事件)一次(可多次點選) 節流 throttle
new ({
el: '#app',data: {
params:{
page:1,pagesize:20,name:''
},list: [],total:0,//總的條數
totalPage:0,//總的頁數
flag: false,},created() {
this.getData()
},computed: {
pages() {
let totalPage = this.totalPage;
let page = this.params.page;
// 總的頁數小於10頁
if(totalPage < 10) return totalPagehttp://www.cppcns.com
總結
本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!