Vueはテーブルページング機能を実装します

<el-テーブル
        v-loading="リスト読み込み中"
        :データ="
          list.slice((現在のページ - 1) * ページサイズ、現在のページ * ページサイズ)
        「
        element-loading-text="読み込み中"
        現在の行をハイライト
        国境
      >
        <el-table-column align="center" label="シリアル番号" width="90">
          <テンプレート スロット スコープ="スコープ">
            {{ スコープ.$index + 1 }}
          </テンプレート>
        </el-table-column>
        <el-table-column label="アバター" align="center" width="150">
          <テンプレート スロット スコープ="スコープ">
            <el-avatar :src="scope.row.avatar"></el-avatar>
          </テンプレート>
        </el-table-column>
        <el-table-column align="center" label="UID" width="130">
          <テンプレート スロット スコープ="スコープ">
            {{ スコープ.行.UID }}
          </テンプレート>
        </el-table-column>
        <el-table-column align="center" label="ユーザー名" width="350">
          <テンプレート スロット スコープ="スコープ">
            {{ スコープ.行.ユーザー名 }}
          </テンプレート>
        </el-table-column>
        <el-table-column align="center" label="ゲームID" width="350">
          <template slot-scope="scope"> {{ scope.row.usernick }} </template>
        </el-table-column>
        <el-table-column label="認証タイプ" width="110" align="center">
          <テンプレート スロット スコープ="スコープ">
            <el-tag :type="scope.row.authorizationType | tagTypeFilter">{{
              スコープ行の認可タイプ | 認可タイプフィルター
            } </el-tag>
          </テンプレート>
        </el-table-column>
        <el-table-column align="center" label="成功した招待の数" width="150">
          <テンプレート スロット スコープ="scope">{{ scope.row.successNum }} </テンプレート>
        </el-table-column>
        <!-- <el-table-column align="center" label="操作" width="150">
          <テンプレート スロット スコープ="スコープ">
            <el-ボタン
              タイプ="プライマリ"
              サイズ="ミニ"
              @click="change(scope.$index, scope.row)"
            >
              変更</el-button>
          </テンプレート>
        </el-table-column> -->
      </el-table>
      <!-- ページネーター -->
      <div class="block" style="margin-top: 15px">
        <el-ページネーション
          align="right"
          @current-change="現在の変更を処理する"
          :current-page="現在のページ"
          :page-size="ページサイズ"
          レイアウト="前へ、ページャ、次へ、合計"
          背景
          :total="フィルターリストの長さ"
          単一ページで非表示
        >
        </el-pagination>
</div>

エクスポートデフォルト{
    データ（）{
        戻る {
            currentPage:1//現在のページ番号 pageSize:10//ページあたりに表示される項目数 list:[]//表示されるテーブルデータ}
        }
 
    方法{
            現在の変更を処理する(val) {
            this.currentPage = val;
        },
    }
 
}