ページング効果は、参考までに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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 組み込み Linux で QT アプリケーションを再起動する簡単な方法 (QT4.8 qws ベース)
>>: Linux での MySQL 5.7.18 yum のアンインストールからインストールまでのプロセスの図
目次序文フロントエンドモジュール開発の価値厄介な名前の競合面倒なファイル依存関係モジュール化の利点C...
テスト環境: C:\>systeminfo | findstr /c:"OS 名&q...
目次Node.jsとはNodeJSをインストールするNode を使用して Hello World を...
現在シミュレーションしているのは、マスター スレーブ システム (ホスト 1 台とスレーブ 1 台)...
背景コメントに似た機能を開発する場合は、必要に応じてすべてのコメントのサブセットをクエリする必要があ...
目次1. 自己増分値はどこに保存されますか? 2. 自己価値修正メカニズム3. 自動増分値を変更する...
フロントエンド開発者にとって、さまざまな主要ブラウザのさまざまなバージョンでコードが適切に動作するこ...
VMware が異常シャットダウンした後、再起動すると「この構成ファイルを排他的にロックできませんで...
目次序文sql_mode の説明最も重要なオプションすべてのオプション要約する序文前回の記事「MyS...
目次1. プロセスの基本的な概要2. プロセスの構成要素3. プロセス環境4. プロセスステータス5...
この記事では、Windows 10環境でのMySQL 5.5のインストールと使用方法を紹介します。リ...
症状Centos7 ホストに crontab タスクを設定しましたが、時間が来るとメールを実行して「...
多くの場合、画像をコンテナのサイズに合わせて調整する必要があります。 1. imgタグ方式幅と高さを...
オブジェクトの hasOwnProperty() メソッドは、オブジェクトに特定の独自の (継承され...
1つ以上の機能をロードする <テンプレート> <div id="map&...