記事ディレクトリ
Vue は、開発者が最新の Web アプリケーションを迅速に構築できるようにする豊富な API とコンポーネントを提供する、人気のあるフロントエンド フレームワークです。Web アプリケーションでは、ページネーション機能は非常に一般的な要件であり、ユーザーが大量のデータを迅速に参照して見つけるのに役立ちます。この記事では、データの取得、ページャーの実装、ページのレンダリングなど、Vue がページング機能を実装する方法を紹介します。
データ収集
ページング機能を実装する前に、まずページングデータを取得する必要があります。通常、ページングされたデータは API インターフェイスを介してバックエンド サーバーから取得されます。Vue では、axios ライブラリを使用して HTTP リクエストを送信してデータを取得できます。axios は、ブラウザーおよび Node.js で使用できる Promise ベースの HTTP ライブラリです。以下は、axios を使用してデータをフェッチする例です。
import axios from 'axios';
export default {
data() {
return {
items: [],
currentPage: 1,
pageSize: 10,
pageCount: 0,
};
},
mounted() {
this.getData();
},
methods: {
async getData() {
const response = await axios.get('/api/items', {
params: {
page: this.currentPage,
size: this.pageSize,
},
});
this.items = response.data.items;
this.pageCount = response.data.pageCount;
},
},
};
上記のコードでは、axios ライブラリを使用して HTTP リクエストを送信し、データを取得します。リクエストを送信するときは、現在のページ番号とページごとのデータ量を指定し、応答でページングされたデータと総ページ数を取得する必要があります。データを取得したら、後で使用するために Vue コンポーネントの data 属性に保存できます。
ポケベルの実装
ページングされたデータを取得した後、ページャーを実装する必要があります。ページャーは、ページングされたデータを表示し、ページング操作を提供するために使用される UI コンポーネントです。Vue では、Element-ui ライブラリを使用してページャーを実装できます。element-ui は、開発者が最新の Web アプリケーションを迅速に構築できるようにする豊富なコンポーネントとスタイルを提供する Vue ベースの UI コンポーネント ライブラリです。以下は、Element-ui を使用してページャーを実装する例です。
<template>
<div>
<el-pagination
:current-page="currentPage"
:page-size="pageSize"
:total="pageCount * pageSize"
@current-change="handlePageChange"
></el-pagination>
</div>
</template>
<script>
export default {
props: {
currentPage: {
type: Number,
required: true,
},
pageSize: {
type: Number,
required: true,
},
pageCount: {
type: Number,
required: true,
},
},
methods: {
handlePageChange(page) {
this.$emit('page-change', page);
},
},
};
</script>
上記のコードでは、ページャーは element-ui ライブラリを使用して実装されています。ページャーは、現在のページ番号、ページごとのデータ量、および総ページ数を表示し、ページめくり操作を提供します。ユーザーがページめくりボタンをクリックすると、current-change イベントがトリガーされ、現在のページ番号が $emit メソッドを通じて親コンポーネントに渡されます。
ページのレンダリング
ページングされたデータを取得してページャーを実装した後、データをページ上にレンダリングする必要があります。Vue では、v-for ディレクティブとコンポーネントを使用してデータのレンダリングを実現できます。v-for ディレクティブとコンポーネントを使用してページ化されたデータをレンダリングする例を次に示します。
<template>
<div>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td>{
{ item.id }}</td>
<td>{
{ item.name }}</td>
<td>{
{ item.price }}</td>
</tr>
</tbody>
</table>
<pagination
:current-page="currentPage"
:page-size="pageSize"
:page-count="pageCount"
@page-change="handlePageChange"
></pagination>
</div>
</template>
<script>
import Pagination from './Pagination.vue';
export default {
components: {
Pagination,
},
data() {
return {
items: [],
currentPage: 1,
pageSize: 10,
pageCount: 0,
};
},
mounted() {
this.getData();
},
methods: {
async getData() {
const response = await axios.get('/api/items', {
params: {
page: this.currentPage,
size: this.pageSize,
},
});
this.items = response.data.items;
this.pageCount = response.data.pageCount;
},
handlePageChange(page) {
this.currentPage = page;
this.getData();
},
},
};
</script>
上記のコードでは、v-for 命令を使用してページ データをページにレンダリングし、コンポーネントを使用してページャーを実装します。ユーザーがページャーをクリックすると、ページ変更イベントがトリガーされ、handlePageChange メソッドが呼び出されてデータが取得され、現在のページ番号が更新されます。
要約する
この記事では、データの取得、ページャーの実装、ページのレンダリングなど、Vue がページング機能を実装する方法を紹介します。Vue は、開発者が最新の Web アプリケーションを迅速に構築できるようにする豊富な API とコンポーネントを提供します。axios ライブラリを使用すると、簡単に HTTP リクエストを送信してデータを取得できます。また、element-ui ライブラリを使用すると、ページャーを簡単に実装できます。ページをレンダリングするときは、v-for ディレクティブとコンポーネントを使用して、ページ化されたデータをページに簡単にレンダリングします。