前端結合elementui實現分頁功能

2021-10-25 02:18:21 字數 637 閱讀 2841

在elementui中使用table元件完成頁面的大概框架,並且使用pagination分頁元件---tips:這裡不是重點,不做過多闡述

通過axios把資料全部渲染到頁面上

使用el-pagination分頁元件,定義分頁中的基礎資料(每頁顯示多少資料,資料總條數等)

定義乙個新的儲存頁面資料的newtabledata,在獲取到資料後暫時存在其中

定義函式gettabledata()操作頁面資料,tabledata = newtabledata陣列中擷取:當前頁數-1)*當頁顯示的條數,當前頁數*,每頁顯示數------>這裡就是乙個陣列中的擷取。

通過分頁元件的頁面改變等事件呼叫gettabledata()每次給頁面重新渲染資料

下面是部分的關鍵**

gettabledata函式:把整體資料經過擷取渲染在tabledata中

gettabledata(),
分頁元件獲取當前的頁面值

handlesizechange(val) 

},//獲取當前頁面值

handlecurrentchange(val)

},

分頁元件

element ui實現前端分頁

element ui裡的分頁元件 size change handlesizechange current change handlecurrentchange current page page page sizes 20,50,100 background page size limit lay...

elementUI實現前端分頁

按照他的文件來寫分頁,最主要的是el table裡面展示的資料怎麼處理 最主要就是上面標紅這一塊的處理 allcommoditylist是後台取得資料,currentpage是當前頁,初始值0,pagesize當前需要展示的資料,初始值10 slice 方法從已有陣列中返回選定的資料 最主要就是上面...

結合element UI封裝使用axios

server.js檔案 import axios from axios import store from store 引入store管理 import from element ui 引入element ui的庫檔案 const service axios.create service.inter...