element的pagination分页撰写
有时候后端忙的是时候没有写分页,那就只能自己写了,但也仅限于小规模数据,一旦数据量大(几百上千条),那就只能传参给后端,他不写是他的问题。分页不难,要搞懂逻辑。
一般都是这个逻辑
vue里面
let url ='xxxt';
this.$axios.get(url).then(res => {
let arr=[];
arr=res.data;
console.log(arr)
this.tableTotal_A=res.data.length;//数据总数
let startNum = 0;//截取开始脚标
let endNum = 0;//截取结束脚标
console.log(this.pageSize_A)//每页条数
console.log(this.number_A)//当前页数
if(this.number_A==1){
startNum = 0;
} else {
startNum = (this.number_A-1)*this.pageSize_A
}
let extra = startNum+this.pageSize_A;
if(extra< this.tableTotal_A){
endNum = extra;
}else {
endNum = this.tableTotal_A;
}
console.log(startNum);
console.log(endNum);
//切换每页显示显示多少条
let Num=Math.ceil(this.tableTotal_A/5)
console.log(Num)
if(Num>0&&this.flag){
for(let i=1;i<Num;i++){
let pageArr_A_number=(i+1)*5
this.pageArr_A.push(pageArr_A_number)
this.flag=false
}
}
console.log(startNum);
console.log(endNum);
this.tableArr = arr.slice(startNum,endNum)
console.log(this.tableArr)
})
handleSizeChange_A(val) {
console.log(`每页 ${val} 条`);
this.pageSize_A=val;
this.getTable()
},
handleCurrentChange_A(val) {
console.log(`当前页: ${val}`);
this.number_A=val;
this.getTable()
}
记住在data里面赋好初值,我的话是:
currentPage_A:1,
tableTotal_A:0,
number_A:1,
pageSize_A:5,
pageArr_A:[5],
tableArr:[],