Vueで動的テーブルソート機能を実装する方法

Vue が普及し、Web アプリケーションの構築に Vue を使用する企業が増えるにつれて、Vue での動的テーブルの生成と並べ替えの実装が必要になる問題が発生する可能性があります。この記事では、Vue で動的テーブル ソートを実装する方法を検討します。

まず、動的テーブル並べ替えを実装するには、データを含む配列が必要です。 Vue では data 属性を使用して配列を定義できます。例:

data() {
  return {
    tableData: [
      { name: 'John', age: 25, gender: 'male' },
      { name: 'Jane', age: 30, gender: 'female' },
      { name: 'Bob', age: 20, gender: 'male' }
    ],
    sortKey: 'name',
    reverse: false
  }
},

上に示すように、3 つのオブジェクトを含む配列を定義します。各オブジェクトには名前、年齢、性別の属性が含まれます。また、現在のソートキー名を保存するsortKeyプロパティと、ソート順序を逆にする必要があるかどうかを保存するreverseプロパティも定義します。

次に、テーブルヘッダーがクリックされたときにトリガーできるメソッドを作成する必要があります。このメソッドでは、異なるキー名に基づいて並べ替えるように sortKey プロパティを変更し、reverse プロパティの値に基づいて昇順または降順のどちらで並べ替えるかを決定します。例:

sortTable(key) {
  this.reverse = (this.sortKey == key) ? !this.reverse : false;
  this.sortKey = key;
  this.tableData.sort((a, b) => {
    let valA = a[key];
    let valB = b[key];
    if (this.reverse) {
      [valA, valB] = [valB, valA];
    }
    return valA.localeCompare(valB, 'zh-Hans-CN', { numeric: true });
  });
}

このメソッドでは、まず、現在ソートされたキー名がユーザーがクリックしたヘッダーと同じかどうかを確認します。同じ場合は、reverse 属性が反転され、そうでない場合は、reverse 属性が反転されます。 falseにリセットします。次に、sortKey プロパティを、ユーザーがクリックしたテーブル ヘッダーの data プロパティに設定します。

最後に、ソートコードの核となる部分です。アロー関数、分割、多言語ソートを使用して、sort メソッドを使用して配列をソートします。具体的には、反転した値と現在のキー名に対応する属性値を使用し、localeCompare メソッドを使用して 2 つの値を比較して中国語の並べ替えを実現します。

次に、テーブル ヘッダーにイベント リスナーを追加して、sortTable メソッドを呼び出して並べ替えを実装する必要があります。例:

<th @click="sortTable(&#39;name&#39;)">姓名</th>
<th @click="sortTable(&#39;age&#39;)">年龄</th>
<th @click="sortTable(&#39;gender&#39;)">性别</th>

ここでは、テーブル ヘッダーの各セルにクリック イベント リスナーを追加し、ユーザーがテーブル ヘッダーをクリックしたときに並べ替えるために、選択したデータ属性を sortTable メソッドに渡します。

最後に、データを並べ替えるたびにテーブルが再レンダリングされるようにテーブルを更新する必要があります。 v-for ディレクティブを使用して、tableData 配列を反復処理し、各オブジェクトのプロパティを HTML テーブル内の対応するセルにバインドできます。例:

<table>
  <thead>
    <tr>
      <th @click="sortTable(&#39;name&#39;)">姓名</th>
      <th @click="sortTable(&#39;age&#39;)">年龄</th>
      <th @click="sortTable(&#39;gender&#39;)">性别</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item, index) in tableData" :key="index">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <td>{{ item.gender }}</td>
    </tr>
  </tbody>
</table>

これらのコードを通じて、Vue で動的に生成されたテーブルの並べ替え機能を簡単に実装できます。大規模なデータ セットを扱う場合でも、単純に並べ替えられた表示を扱う場合でも、Vue にはタスクを完了するのに役立つ実用的なツールとメソッドが数多く用意されています。

以上がVueで動的テーブルソート機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。