后端返回list集合，前端如何做出分页效果

最新推荐文章于 2024-05-27 15:16:33 发布

rookie___boy

最新推荐文章于 2024-05-27 15:16:33 发布

阅读量1k

点赞数

分类专栏：实习代码文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/rookie___boy/article/details/126351743

版权

前端开发 Vue 分页 el-ui 数据处理

关键词由CSDN通过智能技术生成

实习代码专栏收录该内容

9 篇文章 0 订阅

订阅专栏

后端返回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;
  });

},