Vueでページングコンポーネントを実装するにはどうすればよいですか?

Vue は優れたフロントエンド フレームワークであり、大量のデータを処理する場合にはページング コンポーネントが不可欠です。ページネーション コンポーネントを使用すると、ページが整理され、ユーザー エクスペリエンスも向上します。 Vue では、ページング コンポーネントの実装は複雑ではありません。この記事では、Vue がページング コンポーネントを実装する方法を紹介します。

1. 要件の分析

ページング コンポーネントを実装する前に、要件を分析する必要があります。基本的なページング コンポーネントには、次の機能が必要です。

1. 現在のページ数、合計ページ数、各ページに表示されるアイテム数を表示します
2. ページングをクリックします別のページに切り替えるボタン
3. 現在のページのデータを表示
#現在のページ番号を強調表示
4. ##ページングバー番号セレクターを表示
5. #2. 実装手順

ファイルの分割

##管理を容易にするために、ページング コンポーネントを 3 つのファイルに分割しました:

• SelectPerPage.vue: ページング項目セレクター コンポーネント。主に項目選択ドロップダウン ボックスのレンダリングと変更イベントの処理を担当します。
• ページング データのバインディング

現在のページ番号、ページごとの項目数などのページング関連データを保存するには、いくつかの変数を定義する必要があります。 、および総ページ数。これらの変数は Pagination.vue で定義する必要があります。同時に、親コンポーネントから渡されたデータを受け取るために props 属性を導入する必要もあります。

2. export default { props: { currentPage: { // 当前页码 type: Number, required: true }, total: { // 总记录数 type: Number, required: true }, perPage: { // 每页展示条数 type: Number, required: true } }, data () { return { pages: Math.ceil(this.total / this.perPage), // 总页数 pageList: [] // 存储当前页面展示的页码 } }, mounted () { this.getPageList(this.currentPage) } }

   ログイン後にコピー

ページング ボタンをサブコンポーネントに分割します。これは主に、ページング ボタンのレンダリングとページング切り替えイベントの処理に使用されます。 PaginationItem.vue の内容は次のとおりです。

3. ログイン後にコピー
Pagination.vue では、v-for ディレクティブを使用して複数の PaginationItem.vue コンポーネントをレンダリングする必要があります。ページ数は特定のルールに従って生成される必要があります。このルールについては、次のコードを参照してください:

methods: { // 获取当前页显示的页码 getPageList (currentPage) { let pageList = [] // 存储页码数据 const totalPages = this.pages // 总页数 const visiblePages = 5 // 按钮可见的页码数 const half = Math.floor(visiblePages / 2) // 可见页码数的一半 // 如果总页数小于可显示页数 if (totalPages <= visiblePages) { for (let i = 1; i <= totalPages; i++) { pageList.push(i) } } else { // 如果当前页码小于或等于可见页码数的一半 if (currentPage <= half) { for (let i = 1; i <= visiblePages; i++) { pageList.push(i) } } else if (currentPage >= totalPages - half) { // 如果当前页码大于等于最后一页减去可见页码数的一半 for (let i = totalPages - visiblePages + 1; i <= totalPages; i++) { pageList.push(i) } } else { for (let i = currentPage - half; i <= currentPage + half; i++) { pageList.push(i) } } } this.pageList = pageList } }

コンポーネントの Pagination.vue へのページング切り替えイベント。このイベントは、PaginationItem.vue サブコンポーネントによってトリガーされ、切り替えられたページ番号をパラメーターとして渡す必要があります。
Pagination.vue では、現在のページ番号を更新するために新しいメソッド nextPage を追加する必要があります。同時に、現在のページのインデックスを取得するために計算属性 currentIndex を導入する必要もあります。コードは次のとおりです。

methods: { // 点击页码时触发 handlePageChange (pageNum) { // 如果页码为负数或者大于总页数都停止执行 if (pageNum <= 0 || pageNum > this.pages) return this.currentPage = pageNum this.$emit('change-page', pageNum) // 事件广播向父组件传值 this.getPageList(pageNum) }, // 增加当前页码 nextPage () { if (this.currentIndex < this.pages - 1) { this.currentPage++ this.getPageList(this.currentPage) this.$emit('change-page', this.currentPage) // 事件广播向父组件传值 } } }, computed: { currentIndex () { // 当前页码所在的索引 return this.currentPage - 1 } }

ユーザーが各ページに表示されるレコード数を簡単に切り替えられるようにするには、次のものが必要です。ドロップダウン ボックス コンポーネントを実装します。このコンポーネントは、SelectPerPage.vue ファイルによって実装される必要があります。
SelectPerPage.vue の内容は次のとおりです。

上記は、ページング コンポーネントを実装するための Vue の内容全体です。親コンポーネントに Pagination.vue を導入し、currentPage、total、perPage などの対応するパラメーターを渡す必要があります。このようにして、再利用可能なページング コンポーネントを実装でき、フロントエンド開発の効率と開発エクスペリエンスが向上します。

以上がVueでページングコンポーネントを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。