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 デスクトップ版をインストールする (インストール チュートリアル)

推薦する

優れた UI (ユーザー インターフェース) デザイナーになるための 20 の道標

はじめに: インターフェイス デザイナーの Joshua Porter が自身のブログでこの記事を公...

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

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

mysql: [エラー] 不明なオプション '--skip-grant-tables'

MySQL データベースがエラー 1045 (28000): ユーザー 'ODBC'...

画像をクリックして切り替えるJavaScript

クリックして画像を切り替えることは、日常生活で非常によく行われることです。今日の練習は、画像を切り替...

Vue router-viewとrouter-linkの実装原理

使用 <div id="アプリ"> <router-link ...

Centos7 への MySQL8 のインストールチュートリアル

MySQL 8 の新機能: MySQL をバージョン 5.x から 8.x に直接アップグレードする...

WeChat アプレットのカスタム スクロール ビューのサンプル コード

ミニプログラムカスタムスクロールビュースクロールバーさっそくレンダリングを見てみましょうレンダリング...

Vue が Bibibili のホームページを模倣する際の問題

エンジニアリング構造プロジェクトは2つの部分に分かれています。bilibili-apiはAPIインタ...

Linux環境で環境変数を設定する方法

JDKダウンロードアドレス: http://www.oracle.com/technetwork/j...

CSSはマウスが画像に移動したときにマスク効果を実現します

1.マスクレイヤーのHTMLコードと画像をdivに配置する.img_div に入れました。 <...

CentOS7 システムでスワップを増やす方法の例

序文スワップは、ディスク上にある「仮想メモリ」の一部である特殊なファイル (またはパーティション) ...

MySQL データベース データのロード 複数の用途

目次MySQL Load Dataの多様な用途1. LOAD の基本的な背景2. 基本パラメータをロ...

echarts ワードクラウドチャートを使用した Vue の実践記録

echartsワードクラウドはechartsの拡張版ですhttps://echarts.apache...

シンプルな商品スクリーニング機能を実現するjs

この記事の例では、商品スクリーニング機能を実装するためのjsの具体的なコードを参考までに共有していま...

MySQL 8.0.11 の新機能の紹介

MySQL 8.0 for Windows v8.0.11 公式無料バージョン 64 ビット1. デ...