Vue Element UI實現純前端分頁

2021-10-07 02:00:10 字數 1158 閱讀 4374

思路:我們在請求後端拿到的資料往往有很多條,這時候我們就希望通過分頁讓頁面上只展示某部分資料

如何展示某部分資料呢?

既然是分頁,那麼必定會涉及到兩個東西:

一、每一頁的資料條數,設它為pagenum

二、當前頁,就是當前頁是第幾頁,設它為currentpage

那麼我們就可以根據這兩個變數進行計算,計算什麼呢?

計算出當前要展示的是從第幾條資料開始(設它為start),到第幾條資料結束(設它為end)

開始和結束位置都知道就好辦了,只需要從後端返回的資料進行切割,拿到我們想展示的某部分資料,渲染到頁面中就好啦

下面看一下我的**

這裡是我的html部分

class

="content-item"

v-for

="item of afterchangedata"

:key

="item.id"

>

class

="item-top"

>

class

="item-title"

>

}span

>

div>

class

="item-profile"

>

}div

>

div>

這裡是我的js部分

export

default},

computed:},

methods:}}

<

/script>

這是我實現的效果

第一頁第二頁

核心**就是這裡的幾句

let start =

(當前頁 -1)

* 資料條數

let end = 當前頁 * 資料條數

return

this

.articlelist.

slice

(start, end)

參考**:

vue Element ui 實現分頁

實現分頁功能的關鍵技術點為頁面顯示的結果處理,而此處的關鍵技術點為js的slice 方法。首先介紹slice 方法 slice 方法可從已有的陣列中返回選定的元素。slice 方法可提取字串的某個部分,並以新的字串返回被提取的部分。主要用法 array.slice start,end 引數描述 st...

vue element ui 實現分頁效果

我使用得是el table el pagination來實現的,話不多說,直接上 編輯刪除 export default inject reload 注入reload方法 data created mounted methods handlecurrentchange function curren...

vue Element ui實現分頁效果

當我們向後台請求大量資料的時候,並要在頁面展示出來,請求的資料可能上百條資料或者更多的時候,並不想在乙個頁面展示,這就需要使用分頁功能來去完成了。1.本次所使用的是vue2.0 element ui實現乙個分頁功能,element ui這個元件特別豐富,分頁中給我提供了乙個pagination 分頁...