Vueはv-modelを使用してel-paginationコンポーネントのプロセス全体をカプセル化します。

Vueはv-modelを使用してel-paginationコンポーネントのプロセス全体をカプセル化します。

v-model を使用してページング情報オブジェクトをバインドします。ページング情報オブジェクトには、3 つのコア属性パラメータが含まれています。ページング イベントは、データを照会するメソッドに直接バインドされ、親コンポーネントの handleSizeChange および handleCurrentChange のバインド イベント メソッドが不要になります。

1. はじめに

el-pagination コンポーネントをカプセル化してカスタム ページング コンポーネントを開発することに関する同様の記事はインターネット上にすでにたくさんありますが、それらを読んだ後、私はいつも不満を感じていたので、自分で作成することにしました。

2. 背景

2.1. 従来のページング処理方法

el-pagination コンポーネントを使用する一般的な方法は次のとおりです。

テンプレート部分:

 <el-pagination @size-change="handleSizeChange"
            @current-change="現在の変更処理" :current-page="ページ情報のページ番号"
            :page-sizes="[5, 10, 15, 20]" :page-size="pageInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"
            背景>
        </el-pagination>

スクリプト部分:

エクスポートデフォルト{
  データ() {
    戻る {
      フォームデータ: {
        //クエリ情報 queryInfo:{
          ユーザータイプ: 0,
          deleteFlag: 2, // すべてのタイプを示します pagenum: 1,
          ページサイズ: 10      
        },

        // ユーザータイプ選択ボックスは現在、表示されているラベル値 userTypeLabel: "すべてのタイプ" を選択しています。

        // ユーザー ステータス選択ボックスには現在、選択されたラベル値 userStatusLabel: "すべてのタイプ" が表示されています
      },
        
      // ページング情報 pageInfo:{
        ページ番号: 1,
        ページサイズ: 10,
        合計: 0
      }
    }
  },
  メソッド: {
    // ユーザー情報リストを照会する queryUsers(){
      _this = this とします。
      //console.log(このページ情報);

      this.formData.queryInfo.pagenum = this.pageInfo.pagenum;
      this.formData.queryInfo.pagesize = this.pageInfo.pagesize;

      this.instance.queryUsers(
        this.$baseUrl、this.formData.queryInfo
      ).then(res => {
        // コンソールログ(res.data);
        res.data.code == this.global.SucessRequstCode の場合{
          //クエリが成功した場合_this.pageInfo.total = res.data.data.length;
          _this.userInfoList = res.data.data;
        }それ以外{
          アラート(res.data.message);
        }
      }).catch(エラー => {
        alert('クエリに失敗しました!');            
        コンソール.log(エラー);
      });
    },    
    // ページあたりのアイテム数を変更する handleSizeChange(newSize) {
        this.pageInfo.pagesize = 新しいサイズ;
        this.queryUsers();
    },
    // 現在のページ番号が変更されます handleCurrentChange(newPage) {
        this.pageInfo.pagenum = 新しいページ;
        this.queryUsers();
    }
  }

2.2 問題分析

各ページング クエリには、ある程度単純で反復的な一連の類似メソッドが必要ですが、若干異なる点もあります。つまり、データをクエリする方法が異なります。

強迫性障害を持つプログラマーにとって、単純で反復的なコードは間違いなく非常に不快です。したがって、コンポーネント化する必要があります。

el-pagination ページング コンポーネントの分析:

  1. コア属性パラメータは 3 つあります: 現在のページ番号 (current-page)、ページあたりのレコード数 (page-size)、およびレコードの合計数 (total) です。コア属性パラメータは、親コンポーネント ページ データをバインドすることによって双方向リンクを実装します。現在のページ番号とページあたりのレコード数は通常、ページング サブコンポーネントを操作することによって変更され、レコードの合計数はデータのクエリ後に親コンポーネントによって設定されます。
  2. イベントは 2 つあります: @size-change (ページあたりのアイテム数の変更イベント) と @current-change (現在のページ番号の変更イベント)。これら 2 つのイベントは、それぞれ親コンポーネントの対応するイベント処理メソッド handleSizeChange と handleCurrentChange にバインドされています。どちらもデータ クエリ メソッドを呼び出します。データ クエリ メソッドでは、結果セットを取得した後、レコードの合計数が設定されます。

カスタム ページング コンポーネントの開発目標は、親コンポーネントの handleSizeChange および handleCurrentChange のバインディング イベント メソッドを排除することです。

アイデア: v-model を使用してページング情報オブジェクトをバインドします。ページング情報オブジェクトには、前述の pageInfo など 3 つのコア属性パラメータが含まれます。次に、ページング イベントは、データをクエリするメソッドに直接バインドされます。

3. 計画の実施

3.1. カスタムページングコンポーネント

カスタム ページネーション コンポーネント コードを記述します。ファイルは /src/Pagination.vue です。コードは次のとおりです。

<テンプレート lang="html">
  <div class="ページネーション">
    <el-ページネーション 
      @size-change="ハンドルサイズ変更" 
      @current-change="現在の変更を処理する"
      :current-page.sync="ページ情報.ページ番号"  
      :page-size="ページ情報.ページサイズ" 
      :page-sizes="ページサイズ"
      :total="ページ情報の合計"
      layout="total, sizes, prev, pager, next, jumper"
      背景 >
    </el-pagination>
  </div>   
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    名前: "ページネーション",
    モデル : {
        プロパティ: 'pageInfo',
        イベント: '変更'
    },
    小道具: {
      //ページあたりの項目数を選択する pageSizes: {
        タイプ: 配列、
        デフォルト() {
          [5, 10, 15, 20]を返します。
        }
      },
      // データオブジェクト pageInfo は v-model にバインドされます: {
        タイプ: オブジェクト、
        必須:true
      }
    },
    データ(){
      戻る {            
      }
    },
    メソッド: {
      ハンドルサイズ変更(新しいサイズ) {
        var 新しい値 = {
					ページサイズ: 新しいサイズ、
					ページ番号: newSize <= this.total ? 1: this.pageInfo['pagenum'] 
				};
        this.$emit('change',Object.assign(this.pageInfo,newValue));
        this.$emit('ページネーション');
      },
      現在の変更を処理する(新しいページ) {
        this.$emit('change',Object.assign(this.pageInfo,{pagenum:newPage}));
        this.$emit('ページネーション');
      }
    }    
  }
</スクリプト>

<style lang="css" スコープ>
.ページネーション{
    パディング: 10px 0;
    テキスト配置: 中央;
}
</スタイル>

v-model を使用して双方向のデータ通信を実現する、pagination というカスタム ページング コンポーネント。ページ番号またはページあたりの項目数が変わると、ページネーション イベント @pagination がトリガーされ、親コンポーネント メソッドとのバインディングが提供されます。

pageInfo のフィールド構造は次のように規定されています。

  ページ情報:{
        pagenum : 1, //数値
        ページサイズ: 10, //数値
        合計: 0 //数値
      }

親コンポーネントは、コンポーネント内の pageInfo オブジェクトをバインドするために、同じ構造のデータ オブジェクトを提供する必要があります。

3.2. ページングコンポーネントを登録する

次に、このページング コンポーネントを登録し、main.js に次のコードを追加します。

'@/components/Pagination.vue' からページネーションをインポートします。

//ページングプラグインを登録する Vue.component('pagination', pagination)

3.3. 親コンポーネント呼び出しメソッド

ページネーション コンポーネントを使用して、前の第 2 章のコードを変更します。

テンプレート部分:

  <!-- ページング領域 -->
        <pagination v-model="pageInfo" @pagination="queryUsers"></pagination>

スクリプト部分:

エクスポートデフォルト{ 
  データ() {
    戻る {
      フォームデータ: {
        //クエリ情報 queryInfo:{
          ユーザータイプ: 0,
          deleteFlag: 2, // すべてのタイプを示します pagenum: 1,
          ページサイズ: 10      
        },

        // ユーザータイプ選択ボックスは現在、表示されているラベル値 userTypeLabel: "すべてのタイプ" を選択しています。

        // ユーザー ステータス選択ボックスには現在、選択されたラベル値 userStatusLabel: "すべてのタイプ" が表示されています
      },
        
      // ページング情報 pageInfo:{
        ページ番号: 1,
        ページサイズ: 10,
        合計: 0
      }
    }
  },
  メソッド: {
    // ユーザー情報リストを照会する queryUsers(){
      _this = this とします。
      //console.log(このページ情報);

      this.formData.queryInfo.pagenum = this.pageInfo.pagenum;
      this.formData.queryInfo.pagesize = this.pageInfo.pagesize;

      this.instance.queryUsers(
        this.$baseUrl、this.formData.queryInfo
      ).then(res => {
        // コンソールログ(res.data);
        res.data.code == this.global.SucessRequstCode の場合{
          //クエリが成功した場合_this.pageInfo.total = res.data.data.length;
          _this.userInfoList = res.data.data;
        }それ以外{
          アラート(res.data.message);
        }
      }).catch(エラー => {
        alert('クエリに失敗しました!');            
        コンソール.log(エラー);
      });
    }
  }

このようにして、handleSizeChange および handleCurrentChange イベント応答メソッドが削除されます。ページング情報が変更されると、バインドされた queryUsers メソッドがトリガーされます。

さらに、pageSizes を調整する必要がある場合は、テンプレートで次のように設定します。

:ページサイズ=[10,20,30,50,100]

4. 参考文献

このコンポーネントの開発は主に以下の記事を参考にしています。

Vue+el-pagination セカンダリ カプセル化、https://blog.csdn.net/weixin_47259997/article/details/107887823。

vue プロジェクトは、elementui の el-pagination を使用して、共通のページング コンポーネント (https://www.jianshu.com/p/e241e5710fb0/) をカプセル化します。

これで、v-model を使用して el-pagination コンポーネントをカプセル化する Vue のプロセス全体に関するこの記事は終了です。v-model カプセル化 el-pagination コンポーネントに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • v-model 双方向バインディングデータを実装する vue カスタム コンポーネントのサンプル コード
  • vue3 コンポーネントでの v-model の使用と詳細な説明
  • Vue の v-model ディレクティブと .sync 修飾子の違いの詳細な説明
  • Vue の双方向イベントバインディング v-model の原理についての簡単な説明
  • Vue における v-model を使用したクロスコンポーネントバインディングの基本的な実装方法
  • Vue で親子コンポーネントの値を双方向バインドするために v-model を使用するときに発生する問題と解決策
  • Vue フォーム入力ボックスがフォーカスおよびぼかしイベントをサポートしていない問題の解決策
  • カスタムイベントを使用した Vue のフォーム入力コンポーネントの詳細な使用方法 [日付コンポーネントと通貨コンポーネント]
  • Vue フォーム入力バインディングのサンプルコード
  • Vue フォームの入力フォーマットの中国語入力方法の異常
  • Vue フォーム入力バインディング v-model

<<:  Linux でファイルプレフィックスを一括で追加する方法

>>:  例を通してMySQLパーティションテーブルの原理と一般的な操作を学びます

推薦する

CentOS 8.4 での Docker パッケージのオフラインインストールの問題について

使用する仮想マシンは、サーバー環境をシミュレートする CentOS 8.4 です。外部ネットワークに...

Linux の RPM パッケージでインストールされた xinetd ベースのサービスの管理

目次序文1. xinetdサービスに基づく起動管理(1)Telnetサービスのインストール(2)Te...

CentOS のデフォルトの SSH ポート番号を変更する方法の例

LinuxサーバーのデフォルトのSSHポート番号は通常22なので、ほとんどのユーザーはセキュリティ上...

Vue双方向バインディングの詳細な説明

目次1. 双方向バインディング2. 他のタグを選択した場合にも同じ結果になりますか? 答えはもちろん...

CSS で text-align と margin: 0 auto を使用して中央に配置する例コード

CSSでtext-align、margin: 0 autoを使用して中央揃えにするtext-alig...

Linux+ApacheサーバURLの大文字と小文字の区別の問題を解決する

今日、問題が発生しました。ブラウザのアドレスバーにURLアドレスを入力する際、ページを正常にアクセス...

Docker ケース分析: MySQL データベース サービスの構築

目次1 設定ディレクトリとデータディレクトリを作成する3 イメージからホストに構成ファイルをコピーす...

JPQLに基づく純粋なSQL文方式の詳細な説明

JPQL は Java Persistence Query Language の略です。 Java ...

ウェブサイト制作におけるオンライン広告の新しいインタラクティブ体験(グラフィックチュートリアル)

インターネット時代が成熟するにつれて、オンライン広告の発展も加速しています。圧倒的な広告収入と完璧な...

MySQLでのカスタムパラメータの使用に関する詳細な説明

MySQL 変数には、システム変数とシステム変数が含まれます。今回の学習課題はユーザー定義変数です。...

MySQL UNION演算子の基本知識ポイント

MySQL UNION 演算子このチュートリアルでは、MySQL UNION 演算子の構文と例を紹介...

CentOS 7にChromeブラウザをインストールする方法

この記事では、CentOS 7 に Chrome ブラウザをインストールする方法を紹介します。詳細は...

CSS3 で @media を使用して Web ページの適応を実現するためのサンプル コード

現在、コンピュータモニターの画面解像度はますます高くなる傾向にありますが、携帯電話などのモバイルデバ...

iframe を更新する 3 つの方法

コードをコピーコードは次のとおりです。 <iframe src="1.htm&quo...