Comment implémenter la fonction de tri de table dynamique dans Vue

À mesure que Vue devient de plus en plus populaire et que de plus en plus d'entreprises l'utilisent pour créer leurs applications Web, nous pouvons rencontrer des problèmes nécessitant la génération de tables dynamiques et la mise en œuvre du tri dans Vue. Dans cet article, nous explorerons comment implémenter le tri dynamique des tables dans Vue.

Tout d'abord, afin d'implémenter le tri dynamique des tables, nous avons besoin d'un tableau contenant des données. Nous pouvons définir un tableau dans Vue en utilisant l'attribut data. Par exemple :

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
  }
},

Comme indiqué ci-dessus, nous définissons un tableau contenant trois objets, chaque objet contient des attributs de nom, d'âge et de sexe. Nous définissons également une propriété sortKey pour stocker le nom de la clé de tri actuelle et une propriété reverse pour stocker si l'ordre de tri doit être inversé.

Ensuite, nous devons créer une méthode qui peut être déclenchée lorsque l'on clique sur l'en-tête du tableau. Dans cette méthode, nous allons modifier la propriété sortKey pour trier en fonction de différents noms de clés et déterminer s'il faut trier par ordre croissant ou décroissant en fonction de la valeur de la propriété reverse. Par exemple :

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 });
  });
}

Dans cette méthode, nous déterminons d'abord si le nom de la clé triée actuelle est le même que l'en-tête sur lequel l'utilisateur a cliqué. Si tel est le cas, l'attribut reverse sera inversé, sinon l'attribut reverse sera réinitialisé à false. Nous définissons ensuite la propriété sortKey sur la propriété data de l'en-tête du tableau sur lequel l'utilisateur a cliqué.

Enfin, c'est la partie centrale du code de tri. Nous utilisons la méthode sort pour trier le tableau, en utilisant les fonctions fléchées, la déstructuration et le tri multilingue. Plus précisément, nous utilisons la valeur inversée et la valeur d'attribut correspondant au nom de clé actuel, puis utilisons la méthode localeCompare pour comparer les deux valeurs afin d'obtenir un tri chinois.

Ensuite, nous devons ajouter un écouteur d'événement à l'en-tête de la table pour appeler la méthode sortTable afin d'implémenter le tri. Par exemple :

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

Ici, nous avons ajouté un écouteur d'événement de clic pour chaque cellule de l'en-tête du tableau et avons transmis les propriétés de données sélectionnées à la méthode sortTable pour trier lorsque l'utilisateur clique sur l'en-tête du tableau.

Enfin, nous devons mettre à jour le tableau pour qu'il soit à nouveau rendu après chaque tri de données. Nous pouvons utiliser la directive v-for pour parcourir le tableau tableData et lier les propriétés de chaque objet à la cellule correspondante du tableau HTML. Par exemple :

<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>

Grâce à ces codes, nous pouvons facilement implémenter la fonction de tri des tables générées dynamiquement dans Vue. Que vous travailliez avec de grands ensembles de données ou de simples affichages triés, Vue dispose de nombreux outils et méthodes pratiques pour nous aider à accomplir la tâche.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!