项目开发过程中一般会将分页组件进行封装了以后直接使用,但也有可能会有特殊情况,导致前端的分页需要自己来做。这时候我们可以直接用el-pagination来做,在表格数据获取时,对数据进行处理就可以了。代码如下
// 分页组件
<el-pagination background style="margin-top: 20px; text-align: right;"
@size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="paginationData.pageIndex" :page-sizes="[10, 30, 50]" :page-size="paginationData.pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="paginationData.total"
>
</el-pagination>
// 数据储存
data() {
return {
paginationData: { // 分页信息
pageIndex: 1,
pageSize: 10,
total: 0
},
allData: [], //全部表格数据
tableData: [], //当前页表格数据,这个绑定给el-table
}
},
methods: {
// 页面数量改变
handleSizeChange(val) {
this.paginationData.pageSize = val
},
// 页码改变
handleCurrentChange(val) {
this.paginationData.pageIndex = val
},
// 全部数据获取
getData() {
this.$http.post(url, data).then(res => {
// 全部数据获取
this.allData = res
// 表格数据截取
this.tableData = this.allData.slice((this.paginationData.pageIndex - 1)*this.paginationData.pageSize,this.paginationData.pageIndex*this.paginationData.pageSize)
this.paginationData.total = this.allData.length
this.tableData.forEach((el, i) => {
el.$index = (this.paginationData.pageIndex - 1) * this.paginationData.pageSize + 1 + i;
});
})
}
}