Vue プロジェクトがページング効果を実現

Vue プロジェクトがページング効果を実現

ページング効果は、参考までにvueプロジェクトに実装されています。具体的な内容は次のとおりです。

1. ここでは、element-uiを使用して実装します。まずnpmを使用してインストールします。

npm i 要素UI -S

2. main.jsでグローバルインポートする

「element-ui」からElementUIをインポートします。
'element-ui/lib/theme-chalk/index.css' をインポートします。

Vue.use(ElementUI) // 要素の UI をグローバルにハングする

3. パッケージコンポーネント

<テンプレート>
 <div class="block">
 <el-ページネーション
  @current-change="現在の変更を処理する"
  :current-page="現在のページ"
  :ページサイズ="6"    
  レイアウト="前へ、ページャー、次へ、ジャンパー"
  :total="合計"
  :pager-count="5"
 >
 </el-pagination>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 props: ["num", "page"], //渡されたエントリの合計数とページ番号 data() {
 戻る {};
 },
 計算: {
 現在のページ: 関数() {
  this.page を返します。
 },
 合計: 関数() {
  this.num を返します。
 }
 },
 メソッド: {
 ハンドルサイズ変更(val) {
  this.$emit("size-change", val);
 },
 現在の変更を処理する(val) {
  this.$emit("current-change", val);
 }
 }
};
</スクリプト>

<スタイル>
。ブロック {
 テキスト配置: 右;
 /* 幅: 100%; */
}
</スタイル>

4. コンポーネントをインポートして使用する

<テンプレート>
 <div class="mobild">
  <div>
  <ATableページング
   :num="数値"
   :page="ページ"
   @current-change="(val) => { 
   ページ = val;
   リスト();
   }"
  </ATablepaging> ...
  </div>
 </div>
</テンプレート>

<スクリプト>
import ATablePaging from "../paging"; //ページングコンポーネントを導入する export default {
 データ() {
 戻る {
  page:"", //現在のページ番号 num: 1, //コンテンツ項目の合計数};
 },
 メソッド: {
 リスト() {
  //バックエンドによって返されるページの総数はnumに等しい
 },
 },
 マウント() {
 this.news();
 },
 コンポーネント:
 Aテーブルページング
 }
};
</スクリプト>

<スタイルスコープ>
</スタイル>

vue.js の学習チュートリアルについては、特別トピックの vue.js コンポーネント学習チュートリアルと Vue.js フロントエンド コンポーネント学習チュートリアルをクリックして学習してください。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue フォームのフォーム送信 + Ajax 非同期リクエスト + ページング効果
  • Vue.jsはページングクエリ機能を実装します
  • Vue でページャーを書くためのサンプルコード
  • Vue.jsは無限ロードとページング機能の開発を実現します
  • Vue.js テーブルページングの例
  • VUE+SpringBootはページング機能を実装します
  • VueコンポーネントライブラリElementUIはテーブルリストのページング効果を実現します
  • ElementUI ページネーション コンポーネントの使い方 Vue でのページネーション
  • Vue+iviewはページングとクエリ機能を実現します
  • vue+iview ページングコンポーネントのカプセル化
  • Vueはページング機能を実装する

<<:  組み込み Linux で QT アプリケーションを再起動する簡単な方法 (QT4.8 qws ベース)

>>:  Linux での MySQL 5.7.18 yum のアンインストールからインストールまでのプロセスの図

推薦する

jsオブジェクト指向カプセル化カスケードドロップダウンメニューリストの実装手順

この例で開発されたカスケード ドロップダウン メニューは、既存の JSON データに基づいて作成され...

CSS の Display、Visibility、Opacity、rgba、z-index: -1 の違い

ウェブページ上のいくつかの要素の非表示、透明、その他のプロパティを制御する必要があることがよくありま...

Dockerコンテナを外部IPとポートにバインドする方法

Docker を使用すると、外部からコンテナにアクセスしたり、コンテナを相互接続したりすることで、ネ...

Dockerデータ管理とネットワーク通信の使用

Docker をインストールし、Docker コアとインストールを通じて簡単な操作を実行できます。 ...

Docker に MySQL と Redis をインストールする方法

この記事はCentOS 7.3システム環境をベースに、MySQLとRedisのインストールと使用につ...

JavaScript デザインパターン プロキシパターンの学習

目次概要実装保護エージェント仮想エージェント画像の遅延読み込みを実現する仮想プロキシ概要プロキシ パ...

Dockerは複数のポートマッピングコマンドを有効にします

次のように: docker run -d -p 5000:23 -p 5001:22 --name ...

Linux のファイル権限とグループ変更コマンドの詳細な説明

Linux では、すべてがファイルであり (ディレクトリもファイルです)、各ファイルにはユーザーに対...

Nginx に React プロジェクトをデプロイする方法の例

テストプロジェクト: react-demo react-demo プロジェクトをサーバーにクローンし...

jsはユーザーのページ操作を記憶するためにクッキーを使用します

序文開発プロセスでは、ブラウザレベルでユーザーが実行した操作を記憶するなど、同様の要件に遭遇すること...

MYSQL 文字関数を使用してデータをフィルタリングすることに関する質問

問題の説明:構造:テストには2つのフィールドがあります。これらは col1 と col2 で、どちら...

CentOS7.5にHarbor1.7をインストールして設定するプロセス全体

1. 必要なパッケージをダウンロードする wget -P /usr/local https://st...

Vueはログインタイプの切り替えを実装します

この記事では、ログインタイプの切り替えを実装するためのVueの具体的なコードを例として紹介します。具...

Reactフックの仕組み

目次1. React フックと純粋関数2. シンプルなmyUseState 3. myUseStat...

フォント名に従ってフォントを呼び出すと、ブラウザに必要なフォントが表示されます。

質問 1: ブラウザに必要なフォントを表示するように指示するにはどうすればよいでしょうか? フォント...