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 デスクトップ版をインストールする (インストール チュートリアル)
はじめに: インターフェイス デザイナーの Joshua Porter が自身のブログでこの記事を公...
ウェブサイトのナビゲーションを設計することは、家の基礎を築くようなものです。基礎がしっかりしていなけ...
MySQL データベースがエラー 1045 (28000): ユーザー 'ODBC'...
クリックして画像を切り替えることは、日常生活で非常によく行われることです。今日の練習は、画像を切り替...
使用 <div id="アプリ"> <router-link ...
MySQL 8 の新機能: MySQL をバージョン 5.x から 8.x に直接アップグレードする...
ミニプログラムカスタムスクロールビュースクロールバーさっそくレンダリングを見てみましょうレンダリング...
エンジニアリング構造プロジェクトは2つの部分に分かれています。bilibili-apiはAPIインタ...
JDKダウンロードアドレス: http://www.oracle.com/technetwork/j...
1.マスクレイヤーのHTMLコードと画像をdivに配置する.img_div に入れました。 <...
序文スワップは、ディスク上にある「仮想メモリ」の一部である特殊なファイル (またはパーティション) ...
目次MySQL Load Dataの多様な用途1. LOAD の基本的な背景2. 基本パラメータをロ...
echartsワードクラウドはechartsの拡張版ですhttps://echarts.apache...
この記事の例では、商品スクリーニング機能を実装するためのjsの具体的なコードを参考までに共有していま...
MySQL 8.0 for Windows v8.0.11 公式無料バージョン 64 ビット1. デ...