通常情況下分頁都是由後端來實現，前端只需要傳遞分頁引數，但是不排除需要前端來進行分頁的情況，今天就來和大家說下前端如何實現分頁：

1.首先在data裡定義四個變數（pageSize , pageCurrent , tableData , pageTotal）：

pageSize　　表示一頁顯示多少條資料（需要給個預設值，例如15）

pageCurrent　　表示當前頁碼（需要給個預設值，例如1）

tableData　　存放列表資料（陣列）

pageTotal　　表示資料的總個數（需要給個預設值，例如10）

2.分頁元件裡這樣繫結資料：

            　　<el-pagination
                    :current
 
-page="pageCurrent"
                    :page-size="pageSize"
                    :page-sizes="[15, 50, 100]"
                    :total="pageTotal"
                    @current-change="pageChange"
                    @size-change="pageSizeChange"
                    layout="total, prev, pager, next,sizes"
                ></el-pagination>    

3.函式的事件：

　　　　// 分頁
        pageChange(page) {
            this.pageCurrent = page;
        },
        pageSizeChange(page) {
            this.pageSize = page;
        },    

4.table元件裡這樣寫

<el-table v-loading="loading" :data="tableData.slice((pageCurrent - 1) * pageSize, pageCurrent * pageSize)" style="width: 100%" height="500" :row-style="{ height: '60px' }"></el-table>

5.呼叫後端的介面，把介面返回過來的資料賦值給tableData這個list陣列（很簡單，這裡程式碼就不展示了）


6.這樣就實現啦，是不是很簡單！