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」と最後のページが考慮されます) /** * ページングデータ処理 * @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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: ページングのどのページでMySQLのレコードをクエリするか
>>: VMware 仮想マシンのインストール CentOS 8 (1905) システム チュートリアル ダイアグラム
序文: Linux ホストは、エージェント プログラムをインストールする場合でも、SNMP を使用す...
1. コマンドの紹介usermod (ユーザー変更) コマンドは、ユーザー アカウントを変更するため...
MySQL メモリ テーブルと一時テーブルの使用メモリテーブル: セッション 1 $ mysql -...
チャレンジ:文字列内の文字 &、<、>、" (二重引用符)、および &...
1. Dockerサーバーへのリモートアクセスを有効にするdocker が配置されているリモート サ...
HTMLテキスト書式タグ 標簽 描述 <b> 定義粗體文本 <em> 呈現...
目次変換前:変換後: 0x0の基本0x1 「固定高さ」の仮想リストを実装する原理:最適化: 0x2 ...
メタタグ機能METAタグは、HTMLタグのHEAD領域にある重要なタグです。文書の文字セット、使用言...
処理能力と同時実行性を向上させるために、Web コンテナは通常、リクエストを処理するタスクをスレッド...
会社の影響力が拡大し、製品が改良され続けるにつれて、関連するイメージデザインもそれに追いつき、徐々に...
WeChatミニプログラムはますます人気が高まっています。多くの大学生が独学で学んでいるのも見てきま...
MACでMySQLの初期パスワードを忘れた問題を解決する方法を参考までに共有します。具体的な内容は次...
この記事では、カスタムツリーコンポーネントを再帰的に実装するVueの具体的なコードを参考までに共有し...
1. CentOS 7 仮想マシンを開きます。 2. 仮想マシンにログインし、リストにないユーザー名...
序文最近 Linux を学び、その後 Win から Ubuntu に変更しました。以前インストールし...