Un tableau générique — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 7)

Un tableau générique

Communication entre composants · niveau 3 (difficile)

Énoncé

Écrire un composant TableauDonnees qui reçoit des lignes (objets), une description des colonnes ([{ cle: "titre", titre: "Titre" }, …]) et le nom du champ qui identifie une ligne. Par défaut, chaque cellule affiche la valeur brute ; un emplacement à portée cellule permet au parent de redessiner une cellule, en recevant la ligne, la colonne et la valeur. L'utiliser pour afficher les prix en euros et « épuisé » en gras pour un stock nul.

Corrigé


<script setup>
defineProps({
  lignes: { type: Array, required: true },
  // [{ cle: "titre", titre: "Titre" }, …]
  colonnes: { type: Array, required: true },
  cleLigne: { type: String, default: "id" },
});
</script>

<template>
  <table>
    <thead>
      <tr>
        <th
          v-for="c in colonnes"
          :key="c.cle"
          scope="col"
        >
          {{ c.titre }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr
        v-for="ligne in lignes"
        :key="ligne[cleLigne]"
      >
        <td
          v-for="c in colonnes"
          :key="c.cle"
        >
          <!-- Par défaut la valeur brute ; le parent peut tout redessiner -->
          <slot
            name="cellule"
            :ligne="ligne"
            :colonne="c"
            :valeur="ligne[c.cle]"
          >
            {{ ligne[c.cle] }}
          </slot>
        </td>
      </tr>
    </tbody>
  </table>
</template>


<template>
  <TableauDonnees
    :lignes="LIVRES"
    :colonnes="COLONNES"
    cle-ligne="isbn"
  >
    <template #cellule="{ colonne, valeur }">
      <template v-if="colonne.cle === 'prix'">
        {{ valeur.toFixed(2).replace(".", ",") }} €
      </template>
      <strong v-else-if="colonne.cle === 'stock' && valeur === 0">épuisé</strong>
      <template v-else>
        {{ valeur }}
      </template>
    </template>
  </TableauDonnees>
</template>


Titre Prix  Stock
Programmation Java  32,00 € 12
Physique générale 59,00 € épuisé

Le tableau ne sait rien des livres : il parcourt des lignes et des colonnes. Le parent ne reçoit, pour chaque cellule, que ce qu'il demande (colonne et valeur), et laisse la valeur brute pour les colonnes ordinaires.