VUE でページング コンポーネントを実装する手順の詳細な説明

今回は、VUE でページング コンポーネントを実装する方法について、段階的に詳しく説明します。VUE でページング コンポーネントを実装する方法についての 注意点 について、実際のケースを見てみましょう。見て。

ページングは​​、特にさまざまなフロントエンドとバックエンドが分離されている今日では、Web 開発において非常に一般的な機能であり、フロントエンドはデータのカウントに基づいてページングのページ番号を計算します。データと現在のページ番号 pageIndex を取得し、それをページ上にレンダリングする非常に一般的な関数です。初期の jquery の時代から現在のさまざまなフロントエンド フレームワークの時代に至るまで、ページネーション機能 は不可欠です。

ほとんどの場合 (基本的に) ページングは​​非同期データ リストの処理です。ここではまずページング プロセスを理解する必要があります。

各ページに表示されるデータ量 pageSize と現在のページ番号 pageIndex がわかっている場合:

• API をリクエストし、最初の画面データ (pageSize 内) と関連するすべての条件の合計データ数を返します

• 合計データをページ コンポーネントに渡してページ番号を計算し、ページ上にレンダリングします

  
  

• ページ番号をクリックして、ページ番号のデータを取得するリクエストを送信し、データ数とページ番号の下のデータエントリの合計量を返します。

  
  

データを取得するための条件が変更されたため (検索であり、キーワードが変更されたと仮定します)、カウントは不確実です。または、変更されたときに各ページに表示されるデータの量を制御するための選択ドロップダウン ボックスがあります。 、総ページ数は確実ですが、変更する必要もあります。したがって、多くの場合、ページ番号を再計算してレンダリングする必要があります。

プロセスを理解すると、Vue でページング コンポーネントを実装するのが簡単になります。

単純な処理では、スタイルはブートストラップのページング コンポーネントに似ています。最初のページでは、前のページとホームページのボタンが無効になり、最後のページでは、次のページと範囲外のページ番号が無効になります。 ... に置き換えると、レンダリングは次のようになります:

データを取得するための条件が変更されたため (検索であり、キーワードが変更されたと仮定します)、カウントは不確実です。または、変更されたときに各ページに表示されるデータの量を制御するための選択ドロップダウン ボックスがあります。 、総ページ数は確実ですが、変更する必要もあります。したがって、多くの場合、ページ番号を再計算してレンダリングする必要があります。

プロセスを理解すると、Vue でページング コンポーネントを実装するのが簡単になります。

単純な処理では、スタイルはブートストラップのページング コンポーネントに似ています。最初のページでは、前のページとホームページのボタンが無効になり、最後のページでは、次のページと範囲外のページ番号が無効になります。 ... に置き換えると、レンダリングは次のようになります:

ページネーションコンポーネント
テンプレート

<template>
  <ul class="mo-paging">
    <!-- prev -->
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--prev&#39;, {&#39;paging-item--disabled&#39; : index === 1}]" @click="prev">prev</li>
    <!-- first -->
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--first&#39;, {&#39;paging-item--disabled&#39; : index === 1}]" @click="first">first</li>
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--more&#39;]" v-if="showPrevMore">...</li>
    <li :class="[&#39;paging-item&#39;, {&#39;paging-item--current&#39; : index === pager}]" v-for="pager in pagers" @click="go(pager)">{{ pager }}</li>
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--more&#39;]" v-if="showNextMore">...</li>
    <!-- last -->
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--last&#39;, {&#39;paging-item--disabled&#39; : index === pages}]" @click="last">last</li>
    <!-- next -->
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--next&#39;, {&#39;paging-item--disabled&#39; : index === pages}]" @click="next">next</li>
  </ul>
</template>

スタイル(scss)

りぃ

javascript

りぃ

この記事の事例を読んだ後は、親コンポーネントで

.mo-paging {
  display: inline-block;
  padding: 0;
  margin: 1rem 0;
  font-size: 0;
  list-style: none;
  user-select: none;
  > .paging-item {
    display: inline;
    font-size: 14px;
    position: relative;
    padding: 6px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-left: -1px;
    cursor: pointer;
    color: #0275d8;
    &:first-child {
      margin-left: 0;
    }
    &:hover {
      background-color: #f0f0f0;
      color: #0275d8;
    }
    &.paging-item--disabled,
    &.paging-item--more{
      background-color: #fff;
      color: #505050;
    }
    //禁用
    &.paging-item--disabled {
      cursor: not-allowed;
      opacity: .75;
    }
    &.paging-item--more,
    &.paging-item--current {
      cursor: default;
    }
    //选中
    &.paging-item--current {
      background-color: #0275d8;
      color:#fff;
      position: relative;
      z-index: 1;
      border-color: #0275d8;
    }
  }
}

を使用します。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue-Routerのスクロール動作の詳細な説明

vueでのParticles.jsライブラリの使用方法

BootStrap操作データテーブル

以上がVUE でページング コンポーネントを実装する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。