Vue+iview===＞＞＞真假分页功能的实现

最新推荐文章于 2021-07-05 17:56:55 发布

oy123kai

最新推荐文章于 2021-07-05 17:56:55 发布

阅读量165

点赞数 1

分类专栏： vue js

本文链接：https://blog.csdn.net/oy123kai/article/details/116495230

版权

前端开发分页数据加载接口调用用户界面

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

vue 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

<Table 
          :columns="columns_first" 
          :data="userpage" 
          border
          highlight-row
          :loading="ifLoading"
          @on-current-change="handleCurrentRowthree"
          @on-selection-change="selectionChange">
				</Table>

<Page  
          :total="totalNum" 
          :current="currentPageIdx"   
          @on-change="changePage" 
          show-elevator></Page>


//data
filterSearch: {
        pageNo: 1,
        pageSize: 10,
        memberId:"",
        symbol:"",
        exchangeName:"",
        positionSide:"",
        different:"",
      },
  currentPageIdx: 1,
  ifLoading: true,
  totalNum: null,
  columns_first: [
        {
          type: "selection",
          width: 60,
        },
        {
          title: "ID",
          key: "id",
          width: 90,
        },
        {
          title: "会员ID",
          key: "memberId",
          width: 80,
        },
      ],
userpage: [],
historyData:[],// 初始化信息总条数

真分页js

refreshPage(obj = {}) {
      this.ifLoading = true;
      bicmcoin(obj).then((res) => {
        if (!res.code) {
          this.ifLoading = false;
          this.userpage = res.data.content;
          console.log(res, "res");
          this.totalNum = res.data.totalElements;
        } else this.$Message.error(res.message);
      });
    },
    changePage(pageIndex) {
      this.currentPageIdx = pageIndex;
      this.filterSearch.pageNo = pageIndex;
      this.refreshPage(this.filterSearch);
    },

假分页js

refreshPage(obj = {}) {
      this.ifLoading = false;
        this.ifLoading = true;
        bicmcoin(obj).then((res) => {
          if (!res.code) {
            this.ifLoading = false;
            this.historyData = res.data;
            this.totalNum = res.data.length;
            if(this.totalNum<this.filterSearch.pageSize){
              this.userpage = this.historyData;
            } else {
              this.userpage = this.historyData.slice(0, this.filterSearch.pageSize);
            }
          } else this.$Message.error(res.message);
        });
    },
    changePage(index) {
      var _start = (index - 1) * this.filterSearch.pageSize;
      var _end = index * this.filterSearch.pageSize;
      this.userpage = this.historyData.slice(_start, _end);
    },