Vue でのページネーションの使用

ページネーション機能を使用すると、ユーザーはデータをより小さなチャンクまたはページで視覚化できるようになり、ユーザー エクスペリエンスが向上します。ここでは、一度にデータの一部だけを表示できるように、ページネーションを備えた Vue.js コンポーネントを作成する方法を示します。

まず JavaScript オブジェクトを 1 つずつ調べてから、テンプレートを表示します。

必要なローカル データはページ番号だけです。

data(){
    return {
      pageNumber: 0  // default to page 0
    }
}

props にはデータが必要ですが、各ページに最大のデータ量を保存するために size パラメーターも定義しました。

props:{
    listData:{
      type:Array,
      required:true
    },
    size:{
      type:Number,
      required:false,
      default: 10
    }
}

メソッドでは、次のページと前のページに対して 2 つのメソッドを定義しました:

methods:{
      nextPage(){
         this.pageNumber++;
      },
      prevPage(){
        this.pageNumber--;
      }
}

計算された属性値を使用して、合計ページ数を計算します:

pageCount(){
      let l = this.listData.length,
          s = this.size;
      return Math.floor(l/s);
}

paginatedData は、フィルターされたデータの計算された属性を取得することです:

paginatedData(){
    const start = this.pageNumber * this.size,
          end = start + this.size;
     return this.listData.slice(start, end);
}

修正: 最初は .splice を使用して配列をコピーしましたが、より完璧な方法は .slice メソッドを使用することです、ありがとうアレクサンダー・カレラスです。

テンプレート内:

<div>
  <ul>
    <li v-for="p in paginatedData">
      {{p.first}} 
      {{p.last}}  
      {{p.suffix}}
    </li>
  </ul>
  <button @click="prevPage">
    Previous
  </button>
  <button @click="nextPage">
    Next
  </button>
</div>

ユーザーが最初または最後でボタンを押せないようにしたいと考えています。prevPage ボタンについては、次のように追加しました:disabled="pageNumber=0" および for nextPage ボタンに、disabled="pageNumber >= pagecount -1" を追加しました。

推奨チュートリアル: 「JS チュートリアル 」

以上がVue でのページネーションの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。