Vueはv-modelを使用してel-paginationコンポーネントのプロセス全体をカプセル化します。

 <el-pagination @size-change="handleSizeChange"
            @current-change="現在の変更処理" :current-page="ページ情報のページ番号"
            :page-sizes="[5, 10, 15, 20]" :page-size="pageInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"
            背景>
        </el-pagination>

エクスポートデフォルト{
  データ（） {
    戻る {
      フォームデータ: {
        //クエリ情報 queryInfo:{
          ユーザータイプ: 0,
          deleteFlag: 2, // すべてのタイプを示します pagenum: 1,
          ページサイズ: 10      
        },

        // ユーザータイプ選択ボックスは現在、表示されているラベル値 userTypeLabel: "すべてのタイプ" を選択しています。

        // ユーザー ステータス選択ボックスには現在、選択されたラベル値 userStatusLabel: "すべてのタイプ" が表示されています
      },
        
      // ページング情報 pageInfo:{
        ページ番号: 1,
        ページサイズ: 10,
        合計: 0
      }
    }
  },
  メソッド: {
    // ユーザー情報リストを照会する queryUsers(){
      _this = this とします。
      //console.log(このページ情報);

      this.formData.queryInfo.pagenum = this.pageInfo.pagenum;
      this.formData.queryInfo.pagesize = this.pageInfo.pagesize;

      this.instance.queryUsers(
        this.$baseUrl、this.formData.queryInfo
      ).then(res => {
        // コンソールログ(res.data);
        res.data.code == this.global.SucessRequstCode の場合{
          //クエリが成功した場合_this.pageInfo.total = res.data.data.length;
          _this.userInfoList = res.data.data;
        }それ以外{
          アラート(res.data.message);
        }
      }).catch(エラー => {
        alert('クエリに失敗しました!');            
        コンソール.log(エラー);
      });
    },    
    // ページあたりのアイテム数を変更する handleSizeChange(newSize) {
        this.pageInfo.pagesize = 新しいサイズ;
        this.queryUsers();
    },
    // 現在のページ番号が変更されます handleCurrentChange(newPage) {
        this.pageInfo.pagenum = 新しいページ;
        this.queryUsers();
    }
  }

<テンプレート lang="html">
  <div class="ページネーション">
    <el-ページネーション 
      @size-change="ハンドルサイズ変更" 
      @current-change="現在の変更を処理する"
      :current-page.sync="ページ情報.ページ番号"  
      :page-size="ページ情報.ページサイズ" 
      :page-sizes="ページサイズ"
      :total="ページ情報の合計"
      layout="total, sizes, prev, pager, next, jumper"
      背景 >
    </el-pagination>
  </div>   
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    名前: "ページネーション",
    モデル ： {
        プロパティ: 'pageInfo',
        イベント: '変更'
    },
    小道具: {
      //ページあたりの項目数を選択する pageSizes: {
        タイプ: 配列、
        デフォルト（） {
          [5, 10, 15, 20]を返します。
        }
      },
      // データオブジェクト pageInfo は v-model にバインドされます: {
        タイプ: オブジェクト、
        必須:true
      }
    },
    データ（）{
      戻る {            
      }
    },
    メソッド: {
      ハンドルサイズ変更(新しいサイズ) {
        var 新しい値 = {
					ページサイズ: 新しいサイズ、
					ページ番号: newSize <= this.total ? 1: this.pageInfo['pagenum'] 
				};
        this.$emit('change',Object.assign(this.pageInfo,newValue));
        this.$emit('ページネーション');
      },
      現在の変更を処理する(新しいページ) {
        this.$emit('change',Object.assign(this.pageInfo,{pagenum:newPage}));
        this.$emit('ページネーション');
      }
    }    
  }
</スクリプト>

<style lang="css" スコープ>
.ページネーション{
    パディング: 10px 0;
    テキスト配置: 中央;
}
</スタイル>

  ページ情報:{
        pagenum : 1, //数値
        ページサイズ: 10, //数値
        合計: 0 //数値
      }

'@/components/Pagination.vue' からページネーションをインポートします。

//ページングプラグインを登録する Vue.component('pagination', pagination)

  <!-- ページング領域 -->
        <pagination v-model="pageInfo" @pagination="queryUsers"></pagination>

エクスポートデフォルト{ 
  データ（） {
    戻る {
      フォームデータ: {
        //クエリ情報 queryInfo:{
          ユーザータイプ: 0,
          deleteFlag: 2, // すべてのタイプを示します pagenum: 1,
          ページサイズ: 10      
        },

        // ユーザータイプ選択ボックスは現在、表示されているラベル値 userTypeLabel: "すべてのタイプ" を選択しています。

        // ユーザー ステータス選択ボックスには現在、選択されたラベル値 userStatusLabel: "すべてのタイプ" が表示されています
      },
        
      // ページング情報 pageInfo:{
        ページ番号: 1,
        ページサイズ: 10,
        合計: 0
      }
    }
  },
  メソッド: {
    // ユーザー情報リストを照会する queryUsers(){
      _this = this とします。
      //console.log(このページ情報);

      this.formData.queryInfo.pagenum = this.pageInfo.pagenum;
      this.formData.queryInfo.pagesize = this.pageInfo.pagesize;

      this.instance.queryUsers(
        this.$baseUrl、this.formData.queryInfo
      ).then(res => {
        // コンソールログ(res.data);
        res.data.code == this.global.SucessRequstCode の場合{
          //クエリが成功した場合_this.pageInfo.total = res.data.data.length;
          _this.userInfoList = res.data.data;
        }それ以外{
          アラート(res.data.message);
        }
      }).catch(エラー => {
        alert('クエリに失敗しました!');            
        コンソール.log(エラー);
      });
    }
  }

:ページサイズ=[10,20,30,50,100]