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

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

ElementUIページングコンポーネントPagination in Vueの使用は参考になります。具体的な内容は次のとおりです。

1. 概要

ElementUI はel-paginationコンポーネントを提供します。対応するパラメータとイベントを構成することでページネーションを実現できます。

2. 実装

1. 基本的な使い方

<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 = ページサイズ
      // ここでデータを更新}
  }

2. バックエンドページングの実装

実装のアイデア: バックエンドにリクエストを送信し、pageNum と pageSize の 2 つのパラメータを渡し、対応するページング データを直接取得します。

// データを取得する 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
      })
    },

3. フロントエンドページングの実装

実装のアイデア:すべてのデータを取得するためにバックグラウンドにリクエストを送信します。フロントエンドは pageNum と pageSize を通じてデータを処理し、最終的に対応するページング データを取得します。データを処理するには 2 つの方法があります。

1. Array.slice を使用して、必要な配列フラグメントを抽出します (この方法では、ページの合計数「1」と最後のページが考慮されます)
2. Array.filterを使用して、必要な配列フラグメントをフィルタリングします(この方法では、条件が満たされている限り、ページの合計数が「1」で最後のページであるかどうかを考慮する必要はありません)。

/**
     * ページングデータ処理 * @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 = インデックス + 開始
      })
      返品リスト
}

概要:フロントエンド ページングでもバックエンド ページングでも、最終的には pageNum (現在のページ) と pageSize (ページあたりのエントリ数) の 2 つのパラメーターが必要になります。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue2.0+ElementUI+PageHelperで実装されたテーブルページング機能
  • VueコンポーネントライブラリElementUIはテーブルリストのページング効果を実現します
  • Vue が elementUI のページングコンポーネントビューを変更しても更新されない問題の詳細な説明
  • vue+elementUIコンポーネントテーブルはフロントエンドのページング機能を実現します
  • Vue+ElementUI テーブルはテーブルページングを実現します
  • Vue+ElementUI はページング関数を実装します - mysql データ

<<:  ページングのどのページでMySQLのレコードをクエリするか

>>:  VMware 仮想マシンのインストール CentOS 8 (1905) システム チュートリアル ダイアグラム

推薦する

Vueはタブ切り替えの虫眼鏡効果を実装します

この記事では、タブ切り替えの虫眼鏡効果を実現するためのVueの具体的なコードを例として紹介します。具...

1 つの記事で JSON (JavaScript Object Notation) を理解する

目次JSONが登場JSON構造JSONオブジェクトJson オブジェクトと JavaScript オ...

CSS 疑似クラス: 空っぽだと光る (サンプルコード)

最近私の記事を読んだ人なら誰でも、私が現在WeChatミニプログラムプロジェクトを担当しており、その...

nginx アンチホットリンクおよびアンチクローラー設定の詳細な説明

新しい設定ファイルを作成します (たとえば、nginx インストール ディレクトリの下の conf ...

Kali Linux Vmware 仮想マシンのインストール (図とテキスト)

準備: 1. VMwareワークステーションソフトウェアをインストールする2. Kali Linux...

セマフォによるTomcatの異常終了の解決方法

最近はビッグデータで遊んでいます。友人が私のところに来て、オンラインの Tomcat が不可解に終了...

mysql ERROR 1045 (28000) 問題の解決方法

私はmysql ERROR 1045に遭遇し、この問題に長い時間を費やしました。私はそれを自分で書き...

MySQL の concat 関数についての簡単な説明。MySQL でフィールドの前または後に文字列を追加する方法

MySQL で concat 関数を使用する方法: CONCAT(文字列1、文字列2、…)戻り値は、...

Vue で Openlayer を使用して読み込みアニメーション効果を実現する

注意: スコープアニメーションは使用できません。 ! ! ! GIF経由 <テンプレート>...

CSS の flex と inline-flex の違いの詳細な説明

inline-flex は inline-block と同じです。内部要素用の display:fl...

ReactのsetStateがマクロタスクなのかマイクロタスクなのかについて詳しく話しましょう

目次序文面接官は適切な質問をしていますか? § React は setState をどのように制御し...

VUE 3 テレポート コンポーネントと使用構文をすぐに使い始める

目次1. テレポートの紹介1.1. 複数のテレポートを使用する2. テレポートを使用する理由3. テ...

数ステップでサイバーパンク2077風の視覚効果を実現するCSS

背景記事を始める前に、賽博朋克とは何か、賽博朋克2077とは何かを簡単に理解しましょう。サイバーパン...

MySQLストレージ時間タイプの選択に関する問題の説明

MySQL では、datetime 型は通常、時間を保存するために使用されますが、現在では多くのシス...