elementUIタブパッケージ - 更新

elementUIタブパッケージ - 更新（トリガーサブアセンブリおよび非同期イベントを処理する親コンポーネントに、バックエンドインターフェイスにリンクされています）

ここで私は、非同期を解決するためにタイマーを使います

はしごは、その人生が成功への近道ではないと言う、そしてこの理由のために、自分の疑問を決して

ページングコンポーネント

<テンプレート> 
  の<divクラス= "pagingDive"> 
    <DIV CLASS = "ブロック"> 
      <EL-ページネーションの
        背景
        サイズ変更= "handleSizeChange" @ 
        電流の変化= "handleCurrentChange" @ 
        ：現在-page.sync = "ページ" 
        ：ページサイズ= "制限" 
        レイアウト= "合計、PREV、ページャ、次" 
        ：合計= "合計" @ click.native = "pageClick（）" 
      > </ EL-ページ付け> 
    </ div> 
  </ div> 
</テンプレート> 
<スクリプト> 
エクスポートデフォルト{ 
  コンポーネント：{}、
  名称： "ページング"、
  小道具。{ 、PAGECOUNT：親コンポーネントからのオブジェクト、//受信ページング情報cardManagementVal：配列//親コンポーネントは、今後のすべてのデータを受信 
  }、
       

    
    
  データ（）{ 
    リターン{ 
　　　　次の割り当て操作の親コンポーネントからのページング情報を受信//小道具は
      制限：this.pageCount.limit、
      ページ：this.pageCount.page、
      合計：this.pageCount.total、
      アリーを[ ] //空の配列が渡された親コンポーネントを定義し 
    ;} 
  }、
  時計：{}、
  計算：{}、
  メソッド：{ handleCurrentChange（ヴァル）{ 
      this.page =ヴァル; 
    }、
    handleSizeChange：関数（サイズ）{ 
      この。 =サイズ制限; 
    } //ページのクリックイベント実行ページング　　 pageClick（）{ this.tablePagination（）; 
    }、tablePagination（）{ 
      LETアレイ= []、
        STARTNUM = 0、
        endNum = 0。
   
　　
    
      
    
      = this.cardManagementVal.length this.total; 
      STARTNUM =（this.page - 1）* this.limit; 
      IF（* this.limit this.page <this.total）{ 
        endNum = this.page * this.limit; 
      } {他
        endNum = this.total; 
      } 
      アレイ= this.cardManagementVal.slice（STARTNUM、endNum）; 
      this.Ary =配列;ちょうど定義//新しい配列は、すべてのデータを取得した
      この$ EMIT（ "pageHandel"。この.Ary）; //親要素への新しいカスタムイベントを介して、データ及び交換を実行する 
    } 
  }、
  作成（）{ 
　　//第1のデータ取得方法ページング行う
    this.tablePaginationを（）; 
  }、 
  （）{} マウント
} ; 
</ SCRIPT> 
<スタイルのlang = "SCSS"スコープ> 
.pagingDive { 
  幅：100％; 
  高さ：140px;
  背景：#FFF; 
  パディング左：32PX; 
  パディング右：32PX; 
  行の高さ：140px; 
  /deep/.el-pagination { 
    ディスプレイ：フレックス。
    ALIGN-アイテム：センター; 
    .EL-ページャ、
    .EL-ページャのLi { 
      垂直整列：中央; 
    } 
  } 
} 
</スタイル>

コールページングコンポーネント

ここで使用されるrefとタイマー、並びに伝統的な値は、サブコンポーネントイベントを呼び出します

表中の値は、データバインディングページの配列で置き換えることを忘れないでください再定義

構造：

<ボーダー表：列= " columns12 "  ：データ= "アリー" > </表> < - -新しい配列に置き換えられている再定義されたメソッドタブ！>
 
<COM- ページ
         ：、PAGECOUNT =」、PAGECOUNT 「//タブサブアセンブリを定義された値を渡す
        ：cardManagementVal =」cardManagementVal「//テーブルにデータを渡すサブアセンブリ
        @ pageHandel =」pageHandel「//受信方法及び送信サブアセンブリ新しい値の割り当て
        = REF」をサブアセンブリデータを表示するためのページング方法によってはmyChild「// refの呼び出し 
> </ COM-ページ>

ページング成分の導入：

インポートページから 「../../common/paging/index.vue 」。
コンポーネント：{ " COM-ページ" ：ページ}

データで定義されています：

、PAGECOUNT：{ 
        限界:. 8、
        ページ:. 1、
        合計：「16」
}、
アリー：[]新しいデータがバインディングテーブルデータ内のアセンブリのサブに割り当てられているに、//新しい配列が定義されている
[] //：cardManagementValすべてのバックエンドデータ

イベント：

//表示データは、インターフェイス
GETLIST（）{ 
      CONST REQ = {...}; 
      cardLook（REQ）.then（RES => {
         IF（res.data.code == "200は、"）{
          this.c ardManagementVal = RES .data.data.rows; //すべてのデータは、バックエンド
          （）（のsetTimeoutを => {非同期呼び出しページングを使用して、//タイマー溶液サブアセンブリ
            ; this.myChild（）
          ; 0}）
          this.cardManagementVal.map（ =商品> {}）; 
        }そう{ 
          falseに戻り; 
        } 
      }）; 
} 
//サブアセンブリテーブル内のデータにバインドするために送信され、使用される新しいデータ受信
pageHandel（ヴァル）{ 
      this.Ary =ヴァルを; 
} 、
//サブアセンブリを取得し、コールは、REFによって表示するためのサブアセンブリデータをページング 
{（）はmyChildを
      $ refs.myChild.tablePaginationこの（）;. 
}、
カスタムイベントの受信方法及びサブアセンブリ//直接新しいデータ表示データ取得に送信行う
（）{作成を
     this.getList（）;
     この.pageHandel（） ; 
}

elementUIタブパッケージ - 更新

おすすめ