Vue ドキュメントにテーブルの並べ替えとページング機能を実装する方法

Vue は、シングル ページ アプリケーション (SPA) の開発によく使用される人気のある JavaScript フレームワークです。 Vue アプリケーションで大量のデータを表示する必要がある場合、通常はテーブルを使用してデータを表示します。テーブルの並べ替えとページネーションは、ユーザーがデータを参照しやすくするために非常に重要です。この記事では、Vue アプリケーションでテーブルのソート機能とページング機能を使用する方法を紹介します。

1. テーブルの並べ替えを実装する

まず、「lodash」という名前の JavaScript ライブラリを Vue アプリケーションに導入する必要があります。 Lodash は、開発作業を大幅に簡素化できる多くの実用的な機能を提供する非常に便利なツール ライブラリです。

次に、Vue コンポーネントの「data」オプションで、表示したいデータを格納する配列を定義します。また、「sortKey」や「reverse」などの並べ替え用のプロパティを定義し、それらのデフォルト値をそれぞれ「name」と「false」に設定する必要があります。

data() {
  return {
    items: [
      { name: 'John', age: 20 },
      { name: 'Bob', age: 25 },
      { name: 'Alice', age: 30 },
      { name: 'Peter', age: 35 }
    ],
    sortKey: 'name',
    reverse: false
  }
},

次に、ユーザーがヘッダーをクリックして列ごとに並べ替えられるように、ヘッダーの各列のクリック イベントを定義する必要があります。まず、データの並べ替えに使用されるメソッド「sortBy」を定義する必要があります。このメソッドでは、まず並べ替えるフィールドを「sortKey」属性に格納し、次に「reverse」属性の状態に基づいて並べ替える必要があります。

methods: {
  sortBy(key) {
    this.sortKey = key;
    this.reverse = !this.reverse;
    this.items.sort((a, b) => {
      let modifier = 1;
      if (this.reverse) modifier = -1;
      if (a[this.sortKey] < b[this.sortKey]) return -1 * modifier;
      if (a[this.sortKey] > b[this.sortKey]) return 1 * modifier;
      return 0;
    });
  }
},

最後に、v-on ディレクティブを使用してクリック イベントをバインドし、テーブル ヘッダーの各列で sortBy メソッドを呼び出す必要があります。

<th v-on:click="sortBy('name')">Name</th>
<th v-on:click="sortBy('age')">Age</th>

2. テーブル ページングの実装

大量のデータを表示する必要がある場合、すべてのデータを 1 つのテーブルに表示すると、ページのスクロールが遅くなる場合があります。したがって、データを複数のページに分割し、個別に表示する必要があります。ページングを実装する方法は次のとおりです。

Vue コンポーネントの「data」オプションで、現在表示されているページを追跡するために「currentPage」プロパティを定義する必要があります。また、「pageSize」属性を定義して、各ページに含まれる項目の数を定義します。

data() {
  return {
    items: [
      { name: 'John', age: 20 },
      { name: 'Bob', age: 25 },
      { name: 'Alice', age: 30 },
      { name: 'Peter', age: 35 }
    ],
    currentPage: 1,
    pageSize: 2
  }
},

次に、現在のページに必要な項目のサブセットを返す計算プロパティを定義する必要があります。

computed: {
  displayedItems() {
    let start = (this.currentPage - 1) * this.pageSize;
    let end = start + this.pageSize;
    return this.items.slice(start, end);
  }
},

最後に、ページング コンポーネントを Vue テンプレートに追加する必要があります。 Vuetify、Bootstrap、またはカスタム CSS を使用してページング コンポーネントを作成できます。ここでは例としてカスタム CSS を取り上げます。

<ul class="pagination">
  <li v-bind:class="{ disabled: currentPage === 1 }" v-on:click="currentPage--">
    <a>Previous</a>
  </li>
  <li v-for="pageNumber in pages" v-bind:class="{ active: currentPage === pageNumber }" v-on:click="currentPage = pageNumber">
    <a>{{ pageNumber }}</a>
  </li>
  <li v-bind:class="{ disabled: currentPage === pageCount }" v-on:click="currentPage++">
    <a>Next</a>
  </li>
</ul>

Vue コンポーネントでは、2 つの新しい計算プロパティを定義する必要があります。「pageCount」はページの合計数を計算し、「pages」はループでページ番号をレンダリングするために使用される配列を計算します。

computed: {
  pageCount() {
    return Math.ceil(this.items.length / this.pageSize);
  },
  pages() {
    let pagesArray = [];
    for (let i = 1; i <= this.pageCount; i++) {
      pagesArray.push(i);
    }
    return pagesArray;
  }
},

これでテーブルページングの実装が完了しました。ページネーション コンポーネントでページ番号をクリックすると、それに応じて「currentPage」プロパティが更新され、計算プロパティ「displayedItems」を使用して現在のページ番号に必要な項目が表示されます。つまり、Vue でテーブルのソートとページングを実装することは難しいことではなく、上記の方法を使用して簡単に実現できます。

以上がVue ドキュメントにテーブルの並べ替えとページング機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。