前段時間在做乙個系統後台，需要用**載入顯示後台資料項並分頁顯示。
分頁可以通過不同的方式實現：
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中elementUI的使用
官方文件 npm安裝 npm i element ui s在vue中進行引入 在main.js中 import vue from vue import router from router import elementui from element ui import element ui lib ...
vue引入element ui報錯
1.引入css import element ui lib theme chalk index.css 2.報錯資訊 node modules element ui lib theme chalk index.css 1 0 module parse failed unexpected charac...
vue專案引入element ui
先 npm 安裝element ui npm i element ui s然後分為 完整引入 和 按需引入 完整引入 我就不多說了，十分簡單，參照官網 官網位址 按需引入 首先npm安裝依賴 npm install babel plugin component d然後在babel.config.js...