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 ページング コンポーネントの分析:
カスタム ページング コンポーネントの開発目標は、親コンポーネントの 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux でファイルプレフィックスを一括で追加する方法
>>: 例を通してMySQLパーティションテーブルの原理と一般的な操作を学びます
[mysqlカーソルの使い方と機能]例:現在、テーブル A、B、C の 3 つのテーブルがあります。...
1. <div></div> と <span></spa...
序文:タイムスタンプ フィールドは、MySQL でよく使用されます。たとえば、データ行が作成または変...
この記事は、WindowsでのMySQL 8.0.11のインストールチュートリアルを記録しています。...
MySQL では、ユーザーに付与された権限をどのように確認しますか? ユーザーに付与される権限は、グ...
最近、MySQL を学び始めました。インストールはスムーズに進み、インターネット上の既成のチュートリ...
目次echartの初期化アプリベースチャートコンポーネントhtml CS app-base-char...
目次01 レプリカセットアーキテクチャ02 MySQL Shellの紹介とインストール03 My...
目次前面に書かれた複数のストレージマウント方法1.バインドマウント2. 巻数3.tmpfsマウントス...
目次不変の値とは何ですか?不変の値を使用するのはなぜですか? Reactのパフォーマンス最適化は不変...
1. 中国語入力方法を設定する 2. ダブルスペルモードを設定する 3. 注意事項20.04 で S...
MySQL をインストールした後、DOS ウィンドウまたは MySQL 5.7 コマンドライン クラ...
この記事では、移行、バックアップ、アップグレードなどのシナリオで使用される Docker イメージの...
次のように: docker run -d -p 5000:23 -p 5001:22 --name ...
目次1. はじめに: 2. ドッカー: 1 カスタムネットワーク2 展開を開始する3 ネットワークを...