89  
查询码:00001123
前端分页数据处理
作者: 郁冲冲 于 2020年04月07日 发布在分类 / 人防组 / 人防前端 下,并于 2020年04月07日 编辑
前端分页数据处理

常规系统中,最常见的就是分页数据处理;一般情况,后端会做好分页数据的处理,但前端也可对于全部的数据进行分页处理。如下:

粘贴图片

分页函数:

粘贴图片


pageDataFn(number,pageSize,data ){
      //处于第几页 number
      //保存每页数据的数组
      var pagedata = [];
      //pageSize 每页条数
        //设置开始
      let start = (pageSize * number) - pageSize;
      // 设置结束长度
      let end = pageSize * number;
       end = end > data.length ? data.length : end;
      for(let i = start; i < end; i++){
          //所有分页数据 data
          pagedata.push(data[i]) 
      }
      return pagedata ;
      console.log(pagedata)
    },

获取列表数据:

粘贴图片

showListData(val) {
      let _this = this;
      _this.currentPage = val;
      // 显示列表加载效果
      _this.tableLoading = true;
      //初始化列表数据
      _this.$api.NoticeAnnouncement.ShowData().then(res => {
        if (res.data.success) {

          _this.listDate = _this.pageDataFn(val,12,res.data.data);
          // this.listDate = res.data.data;
          //数据总数
          _this.pageTotal = res.data.totalCount;
          _this.tableLoading = false;
        }
      });
    },




 推荐知识

 历史版本

修改日期 修改人 备注
2020-04-07 11:15:27[当前版本] 郁冲冲 1.1.0

 附件

附件类型

PNGPNG

知识分享平台 -V 4.8.7 -wcp