Vue+ElementUI table实现表格分页
小城听风雨 人气:0Vue+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>
加载全部内容