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フロントエンドモジュール化のいくつかの仕様についての簡単な説明

目次序文フロントエンドモジュール開発の価値厄介な名前の競合面倒なファイル依存関係モジュール化の利点C...

NODE.JS を使用して WEBSERVER を作成する手順

目次Node.jsとはNodeJSをインストールするNode を使用して Hello World を...

Mysqlはマスタースレーブ構成とマルチマスターマルチスレーブ構成を実装します

現在シミュレーションしているのは、マスター スレーブ システム (ホスト 1 台とスレーブ 1 台)...

MySql8 WITH RECURSIVE 再帰クエリ親子コレクションメソッド

背景コメントに似た機能を開発する場合は、必要に応じてすべてのコメントのサブセットをクエリする必要があ...

MySQLの自動増分主キーの実装の詳細な説明

目次1. 自己増分値はどこに保存されますか? 2. 自己価値修正メカニズム3. 自動増分値を変更する...

フロントエンド開発に必須:推奨されるブラウザ互換性テストツール 12 選

フロントエンド開発者にとって、さまざまな主要ブラウザのさまざまなバージョンでコードが適切に動作するこ...

この構成ファイルの排他ロックに失敗したという VMware 仮想マシンのプロンプトの解決方法

VMware が異常シャットダウンした後、再起動すると「この構成ファイルを排他的にロックできませんで...

MySQL sql_mode の使用に関する詳細な説明

目次序文sql_mode の説明最も重要なオプションすべてのオプション要約する序文前回の記事「MyS...

Linuxの運用と保守の基本プロセス管理と環境構成分析

目次1. プロセスの基本的な概要2. プロセスの構成要素3. プロセス環境4. プロセスステータス5...

Windows 10 と MySQL 5.5 のインストールとインストールなしの使用の詳細なチュートリアル (画像とテキスト)

この記事では、Windows 10環境でのMySQL 5.5のインストールと使用方法を紹介します。リ...

crontab の実行結果を電子メールでユーザーに通知する方法

症状Centos7 ホストに crontab タスクを設定しましたが、時間が来るとメールを実行して「...

CSS で画像アダプティブ コンテナを実装するいくつかの方法 (要約)

多くの場合、画像をコンテナのサイズに合わせて調整する必要があります。 1. imgタグ方式幅と高さを...

js 属性オブジェクトの hasOwnProperty メソッドの使用

オブジェクトの hasOwnProperty() メソッドは、オブジェクトに特定の独自の (継承され...

Vue+Openlayer をベースに geojson を動的に読み込む方法

1つ以上の機能をロードする <テンプレート> <div id="map&...