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

必要

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

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

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

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

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

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

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

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

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

テスト

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

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

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

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

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