情景浮现:后端没有给分页,一股脑全把数据给前端,比如请求过来有1941条信息,那么我们就应该在页面显示有多少页数据,多少条。
以下为个人写的方法,可能方法有点蠢,不影响功能的实现,如有错误或其他更优写法,欢迎各位小伙伴提出宝贵意见。
<template>
<div>
<el-table
:data="sgData"
style="width: 100%">
<el-table-column
type="index"
width="50">
</el-table-column>
<el-table-column
prop="name"
label="名称"
width="180">
</el-table-column>
<el-table-column
prop="code"
label="基金代号"
width="180">
</el-table-column>
<el-table-column
prop="suspenddate"
label="暂停赎回日期">
</el-table-column>
</el-table>
<el-pagination
@current-change="handleCurrentChange"
background
:page-size="everypageNum"
layout="total,prev, pager, next"
:total="zsTOTAL">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
sgData:[], //表格中的数据
resData: [], //请求返回的数据
shData:[],
zsTOTAL : 0, //总共有多少条数据
pageVal :1, //默认显示第一页
everypageNum :20, //每一页显示多少条
};
},
mounted() {
this.getztjjdata()
},
methods: {
getshjjdata(){
this.$axios.post(
'/apis',
'/fund/suspend/purch',
{
key:'2e29ce045a839c918692223c92fe0fb9'}
).then(res=>{
console.log("22",res.result)
let data = res.result[0]
let arr =[]
for(var i in data){
arr.push(data[i])
}
this.resData = arr //这是得到的结果,数组中有1941条数据
console.log(arr)
let num = arr.length //arr.length 为有多少条数据
this.zsTOTAL = num
this.sgData = arr.slice(this.pageVal-1,this.everypageNum) //当页面第一次加载进来,默认第一页数据
})
},
handleCurrentChange(val) {
this.pageVal = val; //此处为用户点击第几页
// 1: 0,19 当用户点击第一页,那么就是前20条,对耶下标位置应为0至19
//后面截取的位置
var that =this
let start = that.everypageNum*val-20
let end = that.everypageNum*val
if(that.resData.length<= that.everypageNum){
//这种情况为只有20条或者20条以下数据的情况
that.sgData = that.resData
}else{
//这种情况为大于20条数据
if(that.everypageNum*val>=that.resData.length){
//用户点击的那一页是最后一页的数据,比如有49条数据,用户点击第3页,第二3就应该显示最后9条的数据
that.sgData = that.resData.slice(start)
}else{
//用户点击的那一页不是最后一页的数据,比如有49条数据,用户点击第二页,第二页就应该显示20至40条的数据
that.sgData = that.resData.slice(start,end)
}
}
//当有7个 that.resData
//当有21个 that.resData.slice(0,20) that.resData.slice(20)
//当有40, ...
//当有47个 that.resData.slice(20,40) that.resData.slice(40)
//以此类推找规律
},
}
}
</script>
下面是后台返回的数据图片,具体数据就不贴出来了
最后效果展示: