Element UI を使用してページにページング ナビゲーション バーを追加する方法

Element UI を使用してページにページング ナビゲーション バーを追加する方法

必要

ページング バーを追加します。これにより、ページにジャンプしたり、ページ番号に従って特定のページを選択したり、現在のページのサイズを設定したりできます。

エレメントUI公式サイトでページネーションコンポーネントを選択します。

Element UI の公式 Web サイトにアクセスし、以下に示すように適切なページング コンポーネントを選択します。

ここに画像の説明を挿入

UserList.vue コンポーネントのテンプレート内のページング コンポーネントのコードと効果

ページング コンポーネントのコードは次のとおりです。

ここに画像の説明を挿入

ページング コンポーネントの効果は次のとおりです。

ここに画像の説明を挿入

ページングコンポーネントに関係するデータとメソッド

ページング コンポーネントに含まれるデータは次のとおりです。

ここに画像の説明を挿入

ページング コンポーネントに関連するメソッドは次のとおりです。

ここに画像の説明を挿入

テスト

まず、以下に示すようにホームページにアクセスします。

ここに画像の説明を挿入

次に、ページ サイズを次のように 2 項目/ページに変更します。

ここに画像の説明を挿入

次に示すように、5 番目のページ ナビゲーションを選択し、ページ 5 に移動します。

ここに画像の説明を挿入

以下に示すように、ジャンプ入力ボックスからページにジャンプします。

ここに画像の説明を挿入

ここに画像の説明を挿入

Element ui を通じてページにページング ナビゲーション バーを追加する方法については、これで終わりです。Element ページング ナビゲーション バーに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue + 要素を使用してテーブルページングとフロントエンド検索を実装する方法
  • Vue+element-ui はテーブルページング機能の例を実装します
  • 要素はテーブルページングデータ選択+すべて選択を実装し、バッチ操作を改善します。
  • vue + element-uiのページング問題の実装
  • 要素 UI ページング複数選択、ページめくりメモリの例
  • vue+要素タブタブページング効果
  • vue+Element-uiでページング効果を実装するサンプルコードの詳細な説明
  • Vue+ElementUI テーブルはテーブルページングを実現します
  • vue+Element-uiフロントエンドでページング効果を実現
  • Vue+Element UI+Lumenはユニバーサルテーブルページング機能を実装します

<<:  VMware Workstation に Windows Server 2019 をインストールする (グラフィック チュートリアル)

>>:  MySQL マルチインスタンス構成ソリューション

推薦する

DockerはホストのMysql操作に接続します

今日、会社のプロジェクトでは docker を設定する必要があります。Windows に正常にインス...

MySQL の union と union all の簡単な分析

データベースでは、UNION キーワードと UNION ALL キーワードの両方が 2 つの結果セッ...

Nginx は rtmp ライブ サーバーの実装コードを構築します

1. nginxソースディレクトリに新しいrtmpディレクトリを作成し、git clone http...

ミニプログラムはミニプログラムクラウドを使用してWeChatの支払い機能を実装します

目次1. WeChat Payを開く1.1 アフィリエイト加盟店番号1.2 加盟店番号を追加する1....

写真とテキストによる MySQL 8.0.11 インストール チュートリアル

インターネット上には多くのチュートリアルがありますが、基本的には同じです。ただし、細かい原因でソフト...

LinuxスレッドのPID(TID、LWP)を取得するいくつかの方法の詳細な説明

Linux C/C++ では、スレッド レベルの操作は通常、pthread ライブラリを通じて実行さ...

CentOS 6.x のインストール時に発生するエラー「ディスク sda に BIOS RAID メタデータが含まれています」の解決方法

今日、CentOS6.2 をインストールしていたところ、ハード ドライブの検出段階を通過できませんで...

CSS3を使用してヘッダーアニメーション効果を作成する

Netease Kanyouxi公式サイト(http://kanyouxi.163.com/)(棚...

zk+kafka+storm クラスターの docker-compose デプロイメントの実装

クラスターの展開の概要172.22.12.20 172.22.12.21 172.22.12.22 ...

JS を使用してクリップボード内の Excel コンテンツを解析する方法

目次序文1. イベントとクリップボードを貼り付ける2. クリップボード内のコンテンツ形式3. HTM...

フロートとBFCをクリアするCSSメソッド

イギリスBFC: ブロック書式設定コンテキストBFCレイアウトルール内箱は縦方向に次々に配置されます...

Linux ディスクとディスク パーティションを理解するための記事

序文Linux システムのすべてのハードウェア デバイスは、ファイルの形式で表現され、使用されます。...

HTML テーブル マークアップ チュートリアル (28): セルの境界線の色属性 BORDERCOLOR

テーブルを美しくするために、セルごとに異なる境界線の色を設定できます。基本的な構文<TD 境界...

React の 3 つの主要属性における Ref の使用に関する詳細な説明

目次クラスコンポーネント機能コンポーネントインタビューのよくある質問: React における ref...

Docker での環境変数の使用とよくある問題の解決策

序文Docker はコンテナの環境変数を設定できます。設定方法は 2 つあります。イメージを作成する...