Vue整合Element UI的分頁元件實現分頁

前段時間在做乙個系統後台，需要用**載入顯示後台資料項並分頁顯示。

分頁可以通過不同的方式實現：

1、客戶端分頁

一次請求把資料全部從後端請求回來，在前端處理，顯示所需要的頁面的資料項。這樣做的好處是無需多次與服務端進行互動，切換頁面時不需要重新整理所以沒有延遲。但僅限於資料量較小的時候使用，如果資料量很大頁面渲染將變得很慢。

2、服務端分頁

當資料量比較大時，一次請求傳輸所有資料考慮到效率問題就不是很合適，原本分頁的主要目的就是避免一次性從資料庫獲取大量資料，其次才是為了展示效果。這時候前端根據需要將查詢條件（當前頁數和每頁條數）傳給後端，後端根據條件查詢出資料返回給前端。這樣做的好處減輕了每次互動的負擔，但缺點是每次切換頁時都需要訪問資料庫，會有輕微的延遲。

因為我這個系統資料量不大，所以我選擇在客戶端進行分頁。我這裡為了方便用了element-ui的分頁器元件。

它有很多屬性可以選擇，我這裡有很多不需要就沒用到，所以先上乙個官方文件可以根據需要選擇：

不多說廢話直接貼**：

="table-div"
>
"tabledata.slice((currentpage - 1) * pagesize, currentpage * pagesize)" border style=
"width: 96%;margin-left: 2%" height=
"90%"
>
"number" label=
"學號"
>
<
/el-table-column>
"name" label=
"姓名"
>
<
/el-table-column>
"email" label=
"郵箱"
>
<
/el-table-column>
"操作" align=
"center" header-align=
"left"
>
"scope"
>
="button-edit" @click=
"handleedit(scope.index,scope.row)"
>
="el-icon-edit"
>
<
/i>
<
/button>
="button-reset" @click=
"resetpassword(scope.index,scope.row)"
>
="el-icon-refresh"
>
<
/i>
<
/button>
="button-delete" @click=
"handledelete(scope.index,scope.row)"
>
="el-icon-delete"
>
<
/i>
<
/button>
<
/template>
<
/el-table-column>
<
/el-table>
"prev, pager, next, sizes, total, jumper"
:page-sizes=
"[5, 10,100]"
:page-size=
"pagesize"
:total=
"tabledata.length" 
@current-change=
"handlecurrentchange" 
@size-change=
"handlesizechange" 
style=
"text-align: center;margin-top: 1%;"
>
<
/el-pagination>
<
/div>
export
default],
pagesize:10,
currentpage:1}
},methods:
,        handlesizechange:
function
(psize)}}
<
/script>

jquery也有類似的分頁插pagination可供選擇。有能力的話最好還是使用原生的js或者jquery來開發分頁功能，畢竟使用外掛程式不一定所有功能都能符合要求，僅僅是尋求乙個方便。

Vue整合Element UI的分頁元件實現分頁

Vue中elementUI的使用

vue引入element ui報錯

vue專案引入element ui

Vue整合Element UI的分頁元件實現分頁

Vue中elementUI的使用

vue引入element ui報錯

vue專案引入element ui

相關推薦