Vueはページング効果を実現する
4654 ワード
ページングは、ユーザーのトラフィックを節約し、ユーザー体験を向上させるために、ビジネスでよく使用されます.
考えを説明します.
まず、ページ番号currentPageとページサイズpagesizeを定義し、1つの配列で総データを保存します.
属性page_を計算するarrsは、ページに私たちが必要とするページを表示させる役割を果たしています.
私たちはpageでarrsでは元の配列を分割し、slice()メソッドで分割します.
コントロールbuttonでクリック方法をバインドし、ページ番号currentPageを変更して、ページ全体の表示を変更します.
具体的には以下のコードを参照してください.
コード:
転載先:https://www.cnblogs.com/adongyo/p/11373129.html
考えを説明します.
まず、ページ番号currentPageとページサイズpagesizeを定義し、1つの配列で総データを保存します.
属性page_を計算するarrsは、ページに私たちが必要とするページを表示させる役割を果たしています.
私たちはpageでarrsでは元の配列を分割し、slice()メソッドで分割します.
コントロールbuttonでクリック方法をバインドし、ページ番号currentPageを変更して、ページ全体の表示を変更します.
具体的には以下のコードを参照してください.
コード:
data () {
return {
arrs : [
{name:'Otto',id:1},
{name:'Jacob',id:2},
{name:'Larry',id:3},
{name:'Tim',id:4},
{name:'Tom',id:5},
{name:'Jack',id:6},
{name:'Otto',id:1},
{name:'Jacob',id:2},
{name:'Larry',id:3},
{name:'Tim',id:4},
{name:'Tom',id:5},
{name:'Jack',id:6},
{name:'Otto',id:1},
{name:'Jacob',id:2},
{name:'Larry',id:3},
{name:'Tim',id:4},
{name:'Tom',id:5},
{name:'Jack',id:6}
],
currentPage : 1,//
pagesize :10 //
}
}
| 序号 | 题目 | 删除 |
|---|---|---|
| {{index+1}} | {{item.name}} | 削除 |
computed:{
page_arrs(){
let {currentPage,pagesize} = this
return this.arrs.slice((currentPage-1)*pagesize,currentPage*pagesize)
},
current_page(){
return this.currentPage
}
},
methods: {
primaryPage(){
this.currentPage = 1
},
prePage(){
if(this.currentPage == 1){
return
}
this.currentPage = this.currentPage - 1
},
nextPage(){
if(this.currentPage == Math.ceil(this.arrs.length/this.pagesize)){
return
}
this.currentPage = this.currentPage + 1
},
lastPage(){
this.currentPage = Math.ceil(this.arrs.length/this.pagesize)
}
},転載先:https://www.cnblogs.com/adongyo/p/11373129.html