ElementUIはテーブルリストのページング効果のチュートリアルを実装しています。参考までに。具体的な内容は次のとおりです。 Element UI は、開発者、デザイナー、製品マネージャー向けの Vue 2.0 ベースのコンポーネント ライブラリであり、Web サイトを迅速に構築するためのサポート デザイン リソースを提供します。 <el-pagination> は、現在のページの変更イベントと現在のページ数を処理するために、@size-change="handleSizeChange"、@current-change="handleCurrentChange" を追加します。 <!--表--> <div class="formTable" id="formTable"> <el-テーブル ref="表" :data="apprItemData" :header-cell-style="headClass" 行キー="承認項目" :tree-props="{children: 'children'}" 高さ= "420" 境界線> <el-テーブル列 タイプ="選択" 幅="55"> </el-table-column> <el-テーブル列 label="シリアル番号" 幅= "60" align="center"> <テンプレート スロット スコープ="scope">{{scope.$index+1}}</テンプレート> </el-table-column> <el-テーブル列 prop="アイテムコード" ラベル="エンコーディング"> </el-table-column> <el-テーブル列 prop="承認名" label="アイテム名"> </el-table-column> </el-table> </div> <!--表のページ区切り--> <div class="ページネーション"> <el-ページネーション 背景 @size-change="ハンドルサイズ変更" @current-change="現在の変更を処理する" :page-sizes="[5,10, 15, 20, 25]" :page-size="ページサイズ" layout="total, sizes, prev, pager, next, jumper" :total="合計行"> </el-pagination> </div> <script type="text/babel"> var vm = 新しい Vue({ el: '#app', データ:{ アプリアイテムデータ: [], currentPage: 1, //現在のページ totalRow: 0, //ページの総数 pageSize: 10 //現在表示されている項目の数}, 計算: {}, 時計: {}、 作成された() {}, マウント() { this.loadItemData(); }, メソッド: { // 情報を読み込む loadItemData () { var pageSize = this.pageSize; var 現在のページ = this.currentPage; console.log("ページサイズ:"+ページサイズ+",現在のページ:"+現在のページ); //デバッガ; var geturl = '${root}/config/loadItemData.do?rows='+pageSize + '&page=' + currentPage; $.ajax({ タイプ: 'get'、 url:geturl、 コンテンツタイプ: "application/json; 文字セット=utf-8", 成功: 関数(データ) { //デバッガ; console.log("totalRow:"+data.total); vm.apprItemData = データ行; vm.totalRow = 数値(データ.total); }, エラー: 関数(e) { console.log("データの読み込み中にエラーが発生しました:",e); } }) } // ヘッダースタイル設定 headClass() { 'text-align: center;background:#F7F7F7;color:#1C1C1D;' を返します }, //ページ番号の変更 handleSizeChange(val) { this.pageSize = val; this.loadItemData(); }, //現在のページの変更 handleCurrentChange(val) { this.currentPage = val; this.loadItemData(); } } }); </スクリプト> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: VMware12 で Ubuntu19.04 デスクトップ版をインストールする (インストール チュートリアル)
目次1. 初心者が陥りがちな間違い2. Iteratorのremove()メソッドを使用する3. f...
前の記事では、And キーワードを使用した MySql の複数条件クエリ ステートメントを紹介しまし...
この記事では、MacOSでのMySQL 8.0.18のインストールと成功したコマンドライン操作を記録...
目次1. Vue2との比較1. Vue3の新機能2. Vue2とVue3の応答原理の比較3. 配列の...
ウェブサイトのナビゲーションを設計することは、家の基礎を築くようなものです。基礎がしっかりしていなけ...
2つの状況がある1. 開始時間と終了時間が同じボックス内にあります(今月のみ限定) 2. 開始時間と...
ソフトウェア開発者であれば、Subversion に精通している必要があります。 Subversio...
1.1 nginxインストールパッケージとインストールスクリプトをクライアントにコピーし、スクリプト...
インストール前の作業: VMware Workstation がインストールされていることを確認し、...
元の URL: http://segmentfault.com/blog/ciaocc/119000...
場合によっては、ジャンプを完了するために href の代わりにハイパーリンク <a> を...
序文最近、花火アニメーションを作成しました。花火が散るアニメーションです。アニメーションの実装中、花...
WeChat ミニプログラム コンポーネント設計仕様コンポーネントベースの開発という考え方は、私の開...
この記事では、モバイル署名機能を実装するためのJavaScriptの具体的なコードを参考までに共有し...
目次1. 説明2. 関連する依存パッケージをダウンロードする3. 設定ファイル .eslintrc....