VueコンポーネントライブラリElementUIはテーブルリストのページング効果を実現します

<!--表-->
<div class="formTable" id="formTable">
<el-テーブル
  ref="表"
  :data="apprItemData"
  :header-cell-style="headClass"
         行キー="承認項目"
         :tree-props="{children: 'children'}"
         高さ= "420"
  境界線>
 <el-テーブル列
   タイプ="選択"
   幅="55">
 </el-table-column>
 <el-テーブル列
   label="シリアル番号"
   幅= "60"
   align="center">
  <テンプレート スロット スコープ="scope">{{scope.$index+1}}</テンプレート>
 </el-table-column>
 <el-テーブル列
   prop="アイテムコード"
   ラベル="エンコーディング">
 </el-table-column>
 <el-テーブル列
   prop="承認名"
   label="アイテム名">
 </el-table-column>
</el-table>
</div>
<!--表のページ区切り-->
<div class="ページネーション">
 <el-ページネーション
   背景
   @size-change="ハンドルサイズ変更"
   @current-change="現在の変更を処理する"
   :page-sizes="[5,10, 15, 20, 25]"
   :page-size="ページサイズ"
   layout="total, sizes, prev, pager, next, jumper"
   :total="合計行">
 </el-pagination>
</div>

<script type="text/babel">
 var vm = 新しい Vue({
     el: '#app',
     データ：{
         アプリアイテムデータ: [],
         currentPage: 1, //現在のページ totalRow: 0, //ページの総数 pageSize: 10 //現在表示されている項目の数},
     計算: {},
     時計： {}、
     作成された() {},
     マウント() {
         this.loadItemData();
},
     メソッド: {
         // 情報を読み込む loadItemData () {
             var pageSize = this.pageSize;
             var 現在のページ = this.currentPage;
             console.log("ページサイズ:"+ページサイズ+",現在のページ:"+現在のページ);
 //デバッガ;
 var geturl = '${root}/config/loadItemData.do?rows='+pageSize + '&page=' + currentPage;
             $.ajax({
                 タイプ: 'get'、
                 url:geturl、
                 コンテンツタイプ: "application/json; 文字セット=utf-8",
                 成功: 関数(データ) {
                     //デバッガ;
                     console.log("totalRow:"+data.total);
                     vm.apprItemData = データ行;
                     vm.totalRow = 数値(データ.total);
                 },
                 エラー: 関数(e) {
                     console.log("データの読み込み中にエラーが発生しました:",e);
                 }
             })
         }
         // ヘッダースタイル設定 headClass() {
             'text-align: center;background:#F7F7F7;color:#1C1C1D;' を返します
         },
         //ページ番号の変更 handleSizeChange(val) {
             this.pageSize = val;
             this.loadItemData();
         },
         //現在のページの変更 handleCurrentChange(val) {
             this.currentPage = val;
             this.loadItemData();
         }
     }
 });
</スクリプト>