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 マルチインスタンス構成ソリューション

推薦する

Angularの単一プロジェクトを複数プロジェクトにアップグレードするプロセス全体

目次序文開発環境新しいプロジェクトを作成するモバイルウェブプロジェクト角度付きJSONパブリックモジ...

Webデザインチュートリアル(5):Webビジュアルデザイン

<br />前回の記事:Webデザイン講座(4):素材と表現について Webデザイン上級...

Docker 経由で Spring Boot アプリケーションを公開およびデプロイするプロセスの分析

目次手動展開1.アイデアを使ってSpring Bootプロジェクトを作成する2. プロジェクトをJa...

CSS で background-color を使用して背景画像にマスク効果を追加する 2 つの方法

div で background-color と background-image を同時に設定する...

tomcat ログ ディレクトリ内のログ ファイルの分析 (概要)

tomcat が起動されるたびに、次のログ ファイルがログ ディレクトリに自動的に生成され、日付順...

MySQL 5.7.18 のインストールと設定方法のグラフィックチュートリアル (CentOS7)

LinuxにMySQL 5.7.18をインストールする方法1. MySQLをダウンロードします。公...

ウェブページ制作TDは隠し表示もオーバーフロー可能

おそらく、この記事にこのようなタイトルを付けると、誰かがこう尋ねるでしょう。「なぜまだテーブルに注目...

Linuxにログインする際の文字セットの問題を解決する方法

文字セットエラーは常に存在するロケール: LC_CTYPE をデフォルト ロケールに設定できません:...

Linux ps および pstree コマンドの知識ポイントのまとめ

Linux の ps コマンドは Process Status の略です。 ps コマンドは、システ...

vue-routerのマッチングに基づいてパンくずリスト機能を実現する

この記事では主にvue-routerのmatchedをベースにしたbreadcrumb機能を紹介し、...

フロントエンドフレームワーク Vue における親子コンポーネントデータの双方向バインディングの実装

目次1. 親コンポーネントと子コンポーネント間の一方向の値転送1. 親から子への値の受け渡し2. 子...

MySQL自動シャットダウン問題への対処の実践記録

最近、あるプロジェクトを手伝ったのですが、MySQL マシンがしばらくすると自動的に停止し続けました...

MySQLの大規模テーブル最適化ソリューションについての簡単な説明

背景Alibaba Cloud RDS for MySQL(MySQL バージョン 5.7)データベ...

Vueでaxiosを簡単にカプセル化する方法

Vueにaxiosを挿入する 'axios' から axios をインポートします。...

Docker で MySQL を起動したときに SQL 文を自動的に実行する方法

Docker で MySQL コンテナを作成する場合、コンテナの起動後にデータベースとテーブルが自動...