Vueはページング機能を実装する

<el-ページネーション
     レイアウト="前へ、ページャ、次へ"
     @current-change="ページ番号を変更"
     :current-page="ページ番号"
     :page-size="ページサイズ"
     :total="合計">
</el-pagination>

データ（）{
戻る {
   テーブルデータ: [],
        total: 0, // 合計ページ数 pageNum: 1, // 現在のページ pageSize: 15, // ページあたりに表示されるページ数}
}
  マウント: 関数 () {
      this.query(); //ページを読み込むときにデータを取得する},
    方法:{
       //ページ番号を切り替えるchangePageNum: function (val) {
        this.pageNum = val;
        this.query();
      },
      //インターフェースクエリを通じてデータを取得する: function () {
        varデータ = {
          名前: this.name || ''、
          艦隊ID: this.FleetId、
          pageNum: this.pageNum, //現在のページ pageSize: this.pageSize //クエリ番号};
        RoleManage.getRole(データ)
        .then(res => {
          var データ = res;
          （res.成功）の場合{
            テーブルデータ = data.obj.list;
            合計をデータの合計とします。
            this.name = '';
          } それ以外 {
            this.$message('クエリに失敗しました');
          }
        }).catch(エラー => {
          // 異常状況 console.log(err);
        });
      },
   
      }

//スケジュール - システム アドレス帳のページング dispatchCourentPage: 1,
        //スケジュール - システムアドレス帳現在選択されているタグマークdispatchCourentIndex: 1、
        //スケジュールシステムアドレス帳のその他のマーク項目: グループ ID
        ディスパッチMoreコマンドグループID: ''、
        ディスパッチ合計ページ: 0,
//前のページ handleLastPage() {
        this.dispatchCourentPage === 1 の場合、戻り値:
        this.dispatchCourentPage -= 1;
        index = this.dispatchCourentIndex とします。
        if (this.dispatchMorecommandGroupId != '') {
          this.queryBookMoreBygroupId(this.dispatchMorecommandGroupId);
        } それ以外 {
          this.queryBookmember(インデックス);
        }
      },
//次のページ handleNextPage() {
   this.dispatchCourentPage === this.dispatchTotlePage の場合、戻り値は次のようになります。
   this.dispatchCourentPage += 1;
   index = this.dispatchCourentIndex とします。
   if (this.dispatchMorecommandGroupId != '') {
     this.queryBookMoreBygroupId(this.dispatchMorecommandGroupId);
   } それ以外 {
     this.queryBookmember(インデックス);
   }

 }

計算: {
      制限データ() {
        data = [...this.table1Datas] とします。
        データを返します。
      },
            // ページの総数は動​​的に計算する必要があるため、最終的なデータをテーブルに返すには計算プロパティも必要です。
      データページ() {
        const データ = this.limitData;
        const start = this.current * this.size - this.size;
        定数 end = start + this.size;
        [...data].slice(start, end) を返します。
      },
  }

/**
   *データ項目数とページあたりのデータ項目数に基づいてページ数を計算します* データ項目の総数* ページあたりのデータ項目数の制限*/
 ページ数(合計数, 制限) {
     合計数が 0 より大きい場合 ((合計数が制限値より小さい場合) ? 1 の場合 ((合計数が制限値より小さい場合) ) を返します。
        ? (parseInt(合計数 / 制限数) + 1)
         : (合計数 / 制限数))) : 0;
 },

/**
   * ページングの合計ページ数* レコードの合計数: totalRecord
   * ページあたりの最大レコード数: maxResult
 */
 関数ページカウント() {
     合計ページ = (合計レコード + maxResult -1) / maxResult;
}

totalPage = Math.floor((totalRecord +maxResult -1) /maxResult);