Vue+ElementUI table表格分页，供大家参考，具体内容如下

分页的两种方式。前端分页，后端分页。两种方式各有个的优缺点吧。

前端分页：后台只需将数据返回，不需要做过多处理，前端一次请求拿到所有数据后做分页处理。但数据量不能太大，因为前端是先一次性加载所有数据，然后在做分页处理。在数据量多的情况下，加载相对应的会变慢。所有在前端做分页时要先考虑一下后期的数据量。

后端分页：因为是后端分页，前端在每点击一次分页时，便向后台请求一次数据。其实就是避免前端一次性从数据库获取大量数据

一、在elementUI中将表格、分页引入自己的页面中

<template> <div class="app"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"> </el-pagination> </div> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }], // 默认显示第一条 currentPage:1 } }, methods: { handleSizeChange(val) { console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { console.log(`当前页: ${val}`); } }, }</script>

二、前端分页（在一的基础上添加分页功能）

<template> <div class="app"> <!-- 将获取到的数据进行计算 --> <el-table :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> <div class="tabListPage"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"> </el-pagination> </div></div></template><script>export default { data(){ return { // 总数据 tableData:[], // 默认显示第几页 currentPage:1, // 总条数，根据接口获取数据长度(注意：这里不能为空) totalCount:1, // 个数选择器（可修改） pageSizes:[1,2,3,4], // 默认每页显示的条数（可修改） PageSize:1, } }, methods:{ getData(){ // 这里使用axios，使用时请提前引入 axios.post(url,{ orgCode:1 },{emulateJSON: true}, { headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",} } ).then(reponse=>{ console.log(reponse) // 将数据赋值给tableData this.tableData=data.data.body // 将数据的长度赋值给totalCount this.totalCount=data.data.body.length }) }, // 分页 // 每页显示的条数 handleSizeChange(val) { // 改变每页显示的条数 this.PageSize=val // 注意：在改变每页显示的条数时，要将页码显示到第一页 this.currentPage=1 }, // 显示第几页 handleCurrentChange(val) { // 改变默认的页数 this.currentPage=val }, }, created:function(){ this.getData() }}</script>

三、后端分页（在一的基础上添加分页功能）

<template> <div class="app"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> <div class="tabListPage"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"> </el-pagination> </div> </div></template><script>export default { data(){ return { // 总数据 tableData:[], // 默认显示第几页 currentPage:1, // 总条数，根据接口获取数据长度(注意：这里不能为空) totalCount:1, // 个数选择器（可修改） pageSizes:[1,2,3,4], // 默认每页显示的条数（可修改） PageSize:1, } }, methods:{ // 将页码，及每页显示的条数以参数传递提交给后台 getData(n1,n2){ // 这里使用axios，使用时请提前引入 axios.post(url,{ orgCode:1, // 每页显示的条数 PageSize:n1, // 显示第几页 currentPage:n2, },{emulateJSON: true}, { headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",} } ).then(reponse=>{ console.log(reponse) // 将数据赋值给tableData this.tableData=data.data.body // 将数据的长度赋值给totalCount this.totalCount=data.data.body.length }) }, // 分页 // 每页显示的条数 handleSizeChange(val) { // 改变每页显示的条数 this.PageSize=val // 点击每页显示的条数时，显示第一页 this.getData(val,1) // 注意：在改变每页显示的条数时，要将页码显示到第一页 this.currentPage=1 }, // 显示第几页 handleCurrentChange(val) { // 改变默认的页数 this.currentPage=val // 切换页码时，要获取每页显示的条数 this.getData(this.PageSize,(val)*(this.pageSize)) }, }, created:function(){ this.getData(this.PageSize,this.currentPage) } }</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。