ページング効果は、参考までに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 のアンインストールからインストールまでのプロセスの図
この例で開発されたカスケード ドロップダウン メニューは、既存の JSON データに基づいて作成され...
ウェブページ上のいくつかの要素の非表示、透明、その他のプロパティを制御する必要があることがよくありま...
Docker を使用すると、外部からコンテナにアクセスしたり、コンテナを相互接続したりすることで、ネ...
Docker をインストールし、Docker コアとインストールを通じて簡単な操作を実行できます。 ...
この記事はCentOS 7.3システム環境をベースに、MySQLとRedisのインストールと使用につ...
目次概要実装保護エージェント仮想エージェント画像の遅延読み込みを実現する仮想プロキシ概要プロキシ パ...
次のように: docker run -d -p 5000:23 -p 5001:22 --name ...
Linux では、すべてがファイルであり (ディレクトリもファイルです)、各ファイルにはユーザーに対...
テストプロジェクト: react-demo react-demo プロジェクトをサーバーにクローンし...
序文開発プロセスでは、ブラウザレベルでユーザーが実行した操作を記憶するなど、同様の要件に遭遇すること...
問題の説明:構造:テストには2つのフィールドがあります。これらは col1 と col2 で、どちら...
1. 必要なパッケージをダウンロードする wget -P /usr/local https://st...
この記事では、ログインタイプの切り替えを実装するためのVueの具体的なコードを例として紹介します。具...
目次1. React フックと純粋関数2. シンプルなmyUseState 3. myUseStat...
質問 1: ブラウザに必要なフォントを表示するように指示するにはどうすればよいでしょうか? フォント...