后端返回list集合,前端如何做出分页效果
el-ui 分页栏代码
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
el-ui 分页栏参数代码
pageIndex: 1,
pageSize: 10,
totalPage: 0,
el-ui 分页栏方法代码
// 每页数
sizeChangeHandle(val) {
this.pageSize = val;
this.pageIndex = 1;
var endIndex = this.pageSize*this.pageIndex
var realEnd = this.totalPage > endIndex ? endIndex:this.totalPage
this.dataList = this.allList.slice(0,realEnd);
},
// 当前页
currentChangeHandle(val) {
this.pageIndex = val;
var startIndex = val===1?0: (this.pageIndex-1)*this.pageSize
var endIndex = this.pageSize*this.pageIndex
var realEnd = this.totalPage > endIndex ? endIndex:this.totalPage
console.log(startIndex,realEnd)
this.dataList = this.allList.slice(startIndex,realEnd);
},
vue 获取数据方法代码
// 获取数据列表
getDataList () {
// 选择的组织
var organStr = ''
if (!this.isReset&&this.qryForm.selectOrgan != null && this.qryForm.selectOrgan.length >0){
for (let i = 0; i < this.qryForm.selectOrgan.length; i++) {
if (i <this.qryForm.selectOrgan.length-1){
organStr = organStr+this.qryForm.selectOrgan[i]+ ","
}else{
organStr = organStr+this.qryForm.selectOrgan[i]
}
}
}
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl(this.$httpUrl.party_organ_team_members_url+'/list'),
method: "get",
params: this.$http.adornParams({
organs: organStr,
})
}).then(({data}) => {
if (data && data.code === 0) {
// this.$message.success("查询成功");
console.log(data)
this.allList = data.organStatementDto;
this.totalPage = this.allList.length
// 分页
var endIndex = this.pageSize*this.pageIndex
var realEnd = this.totalPage > endIndex ? endIndex:this.totalPage
this.dataList = this.allList.slice(0,realEnd);
} else {
this.$message.info("查询不到数据");
this.dataList = []
}
this.dataListLoading = false
this.loading=false;
});
},