How to2018.06.09

Vueでシンプルなページングを作る方法とサンプルコード

管理画面を作っていると必要になることが多いページング。

SEOが関係ない場合はVueとAPIで画面構築することも多く、Vueでページングを実装する機会が増えてきました。

そこでVueでページングを作る場合は、最低限どんな情報があれば実装できるのか、シンプルなページングのサンプルを作ってみました。

目次

Vueでページングを作るサンプル

Vueでページングを実装する時に最低限必要になるのは、3つのオプションです。

下記が3つのオプションを含めてVueで実装したページングのサンプルコードです。

@[codepen](https://codepen.io/koojy/pen/MXJBLy)

Vueに限らずページングを作るのに全体のページ数は必ず必要になります。

サンプルではページ数は5として、1から5までのページごとの数字を配列で作成しました。

ページ番号をすべて表示するのではなく、途中に「...」を挟むような場合でも全体で何ページあるか必要な情報のため必須のパラメーターです。

全体のページ数と合わせて必ず必要になるのが、現在のページ数です。

サンプルでは現在のページ数は下記に使用しています。

ページングによってはPrev、Nextは使わない場合においても現在のページ番号を表すのに、その番号のみCSSのスタイルを変更することになるかと思います。

UIを作るだけなら必要のないパラメーターですが、ページングを使うからには当然ページング番号を変更すると、新しいリストが表示されなくては困ります。

そこでページングの上位のコンポーネントから、コールバックを受け取りページが変更された時はそのページ番号を引数にとり、処理を実行するようにします。

こうすることで一覧データの取得処理をページング内で行う必要がなり、汎用的なコンポーネントにできます。

使用イメージとしては下記のような形です。

1
2
3
4
5
6
7
8
9
10
data: {
  current: 1
},
methods: {
  changePage(page) {
    // 一覧の取得処理を行う

    this.current = page; // カレントを現在のページ番号に設定
  }
}

ページングの上位コンポーネントで現在のページ番号を保持しておき、コールバックで一覧データを更新完了した後にcurrentを設定することで、ページングの方のカレントが更新されます。

Vueでコンポーネント化する時には使い分回しやすいように、アプリケーション固有の処理は含めないようにします。

今回のページングだと一覧データの取得部分が固有な処理にあたります。

パラメーターでコールバックを受け取ったように、固有な処理を外出しにすることで一覧データの取得処理をページング内に記述しなくてもよくなりました。

要件によって今回紹介したサンプルをのパラメーター以外にも、追加情報としてデータを渡すことがあると思います。

そのコンポーネントに必要なものか、アプリケーションに必要なものか、考えて実装をするとメンテナンス性が高く汎用的なコンポーネントを実装できます。