vue项目使用elementUI pagination 实现前端分页

通常情况下分页都是由后端来实现，前端只需要传递分页参数，但是不排除需要前端来进行分页的情况，今天就来和大家说下前端如何实现分页：

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.这样就实现啦，是不是很简单！