vue Element UI 分頁使用 1

2022-02-25 08:12:34 字數 723 閱讀 7726

最近在使用element-ui這套框架配合vue來寫前端頁面。在用element-ui來製作**的時候,遇到了一些小問題,記錄方便學習。

其中兩個事件是關於切換當前頁和切換顯示的列表條數的。另外的屬性也可以知道它的意思。它們都是動態繫結的。其中幾個屬性的值被存到了data中,

兩個事件的處理簡單的進行賦值。

其中tabledata是我mock的假資料,存在data中。測試結果發現當我切換的時候**繫結的這個tabledata根本就沒有改變。所以理所當然的呈現在**當中。

那麼,意思就是說切換和**資料這兩者根本就沒有聯動起來!找到問題之後就開始去思考如何解決問題。這兩者是存在一定的計算關係的。因為**的資料的長度(條數)

就是根據我切換的數值相應的變化,那麼就應該有這麼乙個計算式:tabledata=((當前頁的頁數*頁的大小)-(當前頁的頁數-1)*頁的大小)

對應到程式中來就是:tabledata=tabledata.slice((this.pagenum-1)*this.pagesize,this.pagenum*this.pagesize);

這個值可以放到計算屬性computed當中,當然也可以直接賦值給**資料,即:

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 分頁...