ElementUI ページネーション コンポーネントの使い方 Vue でのページネーション

<div class="ページネーション">
    <el-ページネーション
      背景
      layout="total, sizes, prev, pager, next, jumper"
      :current-page="テーブルページ.ページ番号"
      :page-size="テーブルページ.ページサイズ"
      :page-sizes="ページサイズ"
      :total="テーブルページの合計"
      @size-change="ハンドルサイズ変更"
      @current-change="ページ変更処理"
    />
</div>

データ（） {
    戻る {
      テーブルページ: {
        pageNum: 1, // ページ番号 pageSize: 10, // ページあたりのレコード数 total: 0 // レコードの総数 },
      ページサイズ: [10, 20, 30]
    }
  },
  メソッド: {
    ページ変更処理(現在のページ) {
      this.tablePage.pageNum = 現在のページ
      // ここでデータを更新},
    ページサイズの変更処理
      this.tablePage.pageSize = ページサイズ
      // ここでデータを更新}
  }

// データを取得する getData() {
      パラメータ = {
        ページ番号: this.tablePage.pageNum、
        ページサイズ: this.tablePage.pageSize
      }
      // バックエンドインターフェースをリクエストする function getDataApi(param, { loading: true }).then(res => {
        //バックグラウンドでデータを返す this.list = res.data.list
        this.tablePage.total = res.data.total
      })
    },

/**
     * ページングデータ処理 * @param data [配列] ページ分割するデータ * @param num [数値] 現在のページ * @param size [数値] 1ページあたりに表示する項目数 */
    getList(データ、数値、サイズ) {
      リスト、合計、開始、終了、isFirst、isLast を取得します。
      合計 = データの長さ
      isFirst = 合計 < サイズ
      isLast = Math.ceil(合計 / サイズ) === num
      開始 = (数値 - 1) * サイズ
      end = isFirst || isLast ? start + (合計 % サイズ) : start + サイズ
      リスト = data.slice(開始、終了)
      list.forEach((項目, インデックス) => {
        item.seq = インデックス + 開始
      })
      返品リスト
    }
    /**
     * ページングデータ処理 * @param data [配列] ページ分割するデータ * @param num [数値] 現在のページ * @param size [数値] 1ページあたりに表示する項目数 */
    getList(データ、数値、サイズ) {
      let リスト、開始、終了
      開始 = (数値 - 1) * サイズ
      終了 = 開始 + サイズ
      リスト = data.filter((item, index) => {
        インデックス >= 開始 && インデックス < 終了を返します
      })
      list.forEach((項目, インデックス) => {
        item.seq = インデックス + 開始
      })
      返品リスト
}