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) システム チュートリアル ダイアグラム

推薦する

ZabbixはSNMPに基づいてLinuxホストを監視します

序文: Linux ホストは、エージェント プログラムをインストールする場合でも、SNMP を使用す...

Linux usermod コマンドの使用

1. コマンドの紹介usermod (ユーザー変更) コマンドは、ユーザー アカウントを変更するため...

MySQL メモリテーブルと一時テーブルの使用方法の詳細な説明

MySQL メモリ テーブルと一時テーブルの使用メモリテーブル: セッション 1 $ mysql -...

HTML シンボルからエンティティへのアルゴリズムのチャレンジ

チャレンジ:文字列内の文字 &、<、>、" (二重引用符)、および &...

IDEA が Docker を統合してリモート展開を実現するための詳細な手順

1. Dockerサーバーへのリモートアクセスを有効にするdocker が配置されているリモート サ...

HTML 基本要約推奨事項 (テキスト形式)

HTMLテキスト書式タグ 標簽 描述 <b> 定義粗體文本 <em> 呈現...

Reactは適応性の高い仮想リストを実装する

目次変換前:変換後: 0x0の基本0x1 「固定高さ」の仮想リストを実装する原理:最適化: 0x2 ...

HTML メタタグの使用の概要 (推奨)

メタタグ機能METAタグは、HTMLタグのHEAD領域にある重要なタグです。文書の文字セット、使用言...

JDKネイティブスレッドプールのバグを修正するTomcatの実装原理

処理能力と同時実行性を向上させるために、Web コンテナは通常、リクエストを処理するタスクをスレッド...

アーティストの自己啓発におけるいくつかの経験

会社の影響力が拡大し、製品が改良され続けるにつれて、関連するイメージデザインもそれに追いつき、徐々に...

WeChatアプレットが計算機機能を実装

WeChatミニプログラムはますます人気が高まっています。多くの大学生が独学で学んでいるのも見てきま...

MAC 上の MySQL の初期パスワードを忘れた場合の対処方法

MACでMySQLの初期パスワードを忘れた問題を解決する方法を参考までに共有します。具体的な内容は次...

Vueはカスタムツリーコンポーネントを再帰的に実装します

この記事では、カスタムツリーコンポーネントを再帰的に実装するVueの具体的なコードを参考までに共有し...

システム CD をマウントして yum ウェアハウスを構築する VMware 15.5 バージョンのグラフィック チュートリアル

1. CentOS 7 仮想マシンを開きます。 2. 仮想マシンにログインし、リストにないユーザー名...

Ubuntu 18.0.4 は mysql をインストールし、エラー 1698 (28000): ユーザー ''root''@''localhost'' のアクセスが拒否されましたを解決します

序文最近 Linux を学び、その後 Win から Ubuntu に変更しました。以前インストールし...