VueコンポーネントライブラリElementUIはテーブルリストのページング効果を実現します

VueコンポーネントライブラリElementUIはテーブルリストのページング効果を実現します

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue elementUI フォームのネストされたテーブルと各行の検証の詳細な説明
  • Vue elementUI はツリー構造テーブルと遅延読み込みを実装します
  • Vue+ElementUI テーブルはテーブルページングを実現します
  • Vue+elementUIはテーブルキーワードのフィルタリングと強調表示を実現します
  • Vue2.0+ElementUI はテーブルページめくりの例を実装します
  • VueベースのElementUIテーブルの詳細説明

<<:  MySQLのワークベンチ例の詳細な説明

>>:  VMware12 で Ubuntu19.04 デスクトップ版をインストールする (インストール チュートリアル)

推薦する

「いいね!」機能では MySQL と Redis のどちらを使用すればよいでしょうか?

目次1. 初心者が陥りがちな間違い2. Iteratorのremove()メソッドを使用する3. f...

OR キーワードを使用した MySql 複数条件クエリ ステートメント

前の記事では、And キーワードを使用した MySql の複数条件クエリ ステートメントを紹介しまし...

MacOS での MySQL 8.0.18 のインストールと設定方法のグラフィック チュートリアル

この記事では、MacOSでのMySQL 8.0.18のインストールと成功したコマンドライン操作を記録...

データバインディングとリストデータの表示にはVue3を使用する

目次1. Vue2との比較1. Vue3の新機能2. Vue2とVue3の応答原理の比較3. 配列の...

ウェブデザイナーが知っておくべき効率的なナビゲーションデザインの3つの原則

ウェブサイトのナビゲーションを設計することは、家の基礎を築くようなものです。基礎がしっかりしていなけ...

Vue el-date-picker 動的制限時間範囲ケースの詳細な説明

2つの状況がある1. 開始時間と終了時間が同じボックス内にあります(今月のみ限定) 2. 開始時間と...

Ubuntu での Subversion (SVN) の詳細なインストールと設定

ソフトウェア開発者であれば、Subversion に精通している必要があります。 Subversio...

Ansible を使用した Nginx のバッチ デプロイのサンプル コード

1.1 nginxインストールパッケージとインストールスクリプトをクライアントにコピーし、スクリプト...

VMWare仮想マシンにCentOS7システムをインストールする詳細な手順

インストール前の作業: VMware Workstation がインストールされていることを確認し、...

htmlハイパーリンクaのクリックイベントの後、hrefで指定されたアドレスにジャンプします。

場合によっては、ジャンプを完了するために href の代わりにハイパーリンク <a> を...

CSS transform-originプロパティを理解する

序文最近、花火アニメーションを作成しました。花火が散るアニメーションです。アニメーションの実装中、花...

WeChatミニプログラム開発のためのコンポーネント設計仕様

WeChat ミニプログラム コンポーネント設計仕様コンポーネントベースの開発という考え方は、私の開...

モバイル署名機能を実装するJavaScript

この記事では、モバイル署名機能を実装するためのJavaScriptの具体的なコードを参考までに共有し...

Vueでeslintを使用する方法の詳細な説明

目次1. 説明2. 関連する依存パッケージをダウンロードする3. 設定ファイル .eslintrc....