js+vue前端分页处理

最新推荐文章于 2024-04-21 06:15:49 发布

知所云

最新推荐文章于 2024-04-21 06:15:49 发布

阅读量300

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_32881447/article/details/112583292

博客提及后端无法做分页处理，而前端有分页查询需求的情况。介绍在Vue中，可先在查询接口内调用一次特定方法，后续在分页方法内调用即可完成前端分页处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端分页处理

最近经常遇到后端不能做分页处理，但是前端又需要分页查询的，emm。。。。一万只羊驼奔腾而过

 flipOver () {
      const pageSize = this.pageInfo.pageSize  // 每页条数
      const pageNo = this.pageInfo.pageNo // 当前页
      const arr = this.tableList// 要分页的arr
      var pagingNum = (pageNo- 1) * pageSize;
      var newArr =
        pagingNum + pageSize >= arr.length
          ? arr.slice(pagingNum , arr.length)
          : arr.slice(pagingNum , pagingNum + pageSize);
      this.detealis = newArr;
    }

vue中在查询接口内调用一次这个方法后，后面再分页方法内调用就行了

async getDataList() {
      // 获取列表信息
      this.loading = true;
      this.$API.onlineQueryPaybackHttp().then(result=>{
        const pageResult = result.pageResult || {}
        this.tableList= pageResult.records || []
        this.pageInfo.total = this.tableList.length;
        this.pageBreak()
        this.loading = false;
      }).catch(err=>{
        this.loading = false;
      })

 currentChange(pageNo) {
      this.pageNo = pageNo;
      this.flipOver()
    },