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) システム チュートリアル ダイアグラム
WebRTC は、Web Real-Time Communication の略で、Web リアルタイ...
この記事では、タブ切り替えの虫眼鏡効果を実現するためのVueの具体的なコードを例として紹介します。具...
目次JSONが登場JSON構造JSONオブジェクトJson オブジェクトと JavaScript オ...
最近私の記事を読んだ人なら誰でも、私が現在WeChatミニプログラムプロジェクトを担当しており、その...
新しい設定ファイルを作成します (たとえば、nginx インストール ディレクトリの下の conf ...
準備: 1. VMwareワークステーションソフトウェアをインストールする2. Kali Linux...
最近はビッグデータで遊んでいます。友人が私のところに来て、オンラインの Tomcat が不可解に終了...
私はmysql ERROR 1045に遭遇し、この問題に長い時間を費やしました。私はそれを自分で書き...
MySQL で concat 関数を使用する方法: CONCAT(文字列1、文字列2、…)戻り値は、...
注意: スコープアニメーションは使用できません。 ! ! ! GIF経由 <テンプレート>...
inline-flex は inline-block と同じです。内部要素用の display:fl...
目次序文面接官は適切な質問をしていますか? § React は setState をどのように制御し...
目次1. テレポートの紹介1.1. 複数のテレポートを使用する2. テレポートを使用する理由3. テ...
背景記事を始める前に、賽博朋克とは何か、賽博朋克2077とは何かを簡単に理解しましょう。サイバーパン...
MySQL では、datetime 型は通常、時間を保存するために使用されますが、現在では多くのシス...