ページのページネーションの問題は、ページ番号、インタフェース呼び出しによってページに対応するデータを取得します

 

以下からの輸入axios '@ / libsに/ api.request' 

CONST MODULE_URL = '/ログ'; 

輸出のconst actionLogData =（パラメータ、CB）=> { 
  axios.request（{ 
    URL： `$ {MODULE_URL} / actionLog`、//接口位置
    方法： '取得'、
    のparams 
  }）。その後、（CB）; 
}。

 

ページのページネーションの問題。

< ページクラス= "テーブルページclearfix" ：合計= "paging.total" ：pageSizeを= "paging.pageSize" ：現在= "paging.pageNo" ショートータルショーエレベーター@に変更= "pageChange" />

 

  ：合計=「paging.totalは、」   データの総数は存在を表し;

  ：pageSizeを=「paging.pageSizeは、」  データの多くの部分は、ページ上に表示されるかを示し;

  ：現在=「paging.pageNoは、」  現在のページ番号を示し;

  @ ON-変更=「pageChangeは、」  対応するページ番号をクリックするとpagechange機能をトリガを示しています。

インタフェースに1、。

  インポート{actionLogData}から '@ / API /ログ'。

 

図2は、エクスポートデフォルト{}はグローバル変数を宣言し、ページデータの初期値を設定します。

  エクスポートデフォルト{ 
    データ（）{ 
      リターン{ 
のgetData：[] // グローバル変数宣言
        // リストページの
         ページングを：{ 
           PAGENUM： 1 、
           のpageSize： 13であり、
           合計： 0 、        
}、

 

{}のインタフェース呼び出し、パラメータは、記載のparamsに呼び出しでインターフェースを入力するたinitListライト機能：方法3、。ActionLogDataインターフェイスを呼び出すことによって、所望の値を得るため、可能な第1のデータに取得した属性値か否かを判断するにconsole.log（RES）によります。

ページに対応するページ取得したデータをクリックして切り替え、および呼び出すと、関数pageChange（ページ）のデータは、取得したページに対応します。

   方法：{ 
      initList（）{ 
        のparams CONST = { 
          pageSizeを：この.paging.pageSize、
          PAGENOではない：この.paging.pageNumを
        }; 

        actionLogDataを（paramsは、RES => {
           IF（！res.status）{ 
            にconsole.log（ ' ！リクエストはエラー」遭遇;）
             リターン; 
          } 
          constの{データ} =のRESを、
           この .getdata = Data.List; // 取得したデータ
          この .paging.total = data.total; // すべてのデータの数を取得します。
        }、ERR => {
           この。Message.Errorアン$（「要求はエラーが発生しました、もう一度やり直してください"。！）; 
        }）; 
      } 

      / * ページ切り替え* / 
      pageChange（ページ）{ 
        この .paging.pageNum = ページ;
         この.initList（）; 
      } 
    }、

 

図4は、開始後終了要求は、）（ピックトランザクションを同時にマウント。

    （）{搭載
       この.initList（）。
      この.pageChange（ページ）。
    }