js+vue前端分页处理

前端分页处理

最近经常遇到后端不能做分页处理，但是前端又需要分页查询的，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()
    },