在开发过程中,当数据不是非常多的时候,前端来处理列表数据的分页,下面分享几个关键的步骤代码。
1、请求全部数据过来
getList(){
let params = {
inParams:{
}
}
this.$axios({url:httpUrl.assetsIpArea.ipQuery,method:'post',params:params}).then((res) =>{
console.log(res,'----')
if(res.columnList){
this.tableDataHeader = res.columnList
}
if(res.valueList && res.valueList.length > 0){
this.tableDataMsg = res.valueList //存放全部数据
this.tableData = res.valueList //存放全部数据 处理关键字查询时会用到
this.total = res.valueList.length
}
this.pageList()
})
}
2.分页处理 pageList()方法
pageList() {
let $self = this;
$self.tableDataMsgList = $self.tableDataMsg.filter(
(item, index) =>
index < $self.queryArgs.pageNum * $self.queryArgs.pageSize &&
index >= $self.queryArgs.pageSize * ($self.queryArgs.pageNum - 1)
);
console.log(this.tableDataMsgList,'这个是当前页的数据吗?') //这个是其中一页的默认10条数据
$self.total = $self.tableDataMsg.length;
},
3、这个是使用element-ui中分页器进行处理分页
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryArgs.pageNum"
:page-sizes="[10, 20, 30, 40]"
:page-size="queryArgs.pageSize"
layout="total, sizes, prev, pager, next,jumper"
:total="total"
>
4、切换分页以及改变pageSize的方法
handleSizeChange(val) {
this.$refs.tableList.clearSort() //这个是用来清除当前页的排序
this.queryArgs.pageSize = val;
this.queryArgs.pageNum = 1;
this.pageList();
},
handleCurrentChange(val) {
console.log(this.$refs.tableList,'reffff')
this.$refs.tableList.clearSort() //这个是用来清除当前页的排序
this.queryArgs.pageNum = val;
this.pageList();
},
到此,这个前端处理分页就结束了,下一篇来分享前端来实现表格数据列表上的排序