14. project [vuejs-12]: beheer van de tabellen HTML

De boomstructuur van het project [vuejs-12] is als volgt:

14.1. Het hoofdscript [main.js]

Het hoofdscript is weer zoals het was in de eerste projecten:


// imports
import Vue from 'vue'
import App from './App.vue'

// plug-ins
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

// Bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// configuratie
Vue.config.productionTip = false

// projectinstantiëring [App]
new Vue({
  name: "app",
  render: h => h(App),
}).$mount('#app')

14.2. De hoofdweergave [App]

De code van de hoofdweergave [App] is als volgt:


<template>
  <div class="container">
    <b-card>
      <!-- bericht -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-12] : gestion des tables</h4>
      </b-alert>
      <!-- component Tabel -->
      <Table @supprimerLigne="supprimerLigne" :lignes="lignes" @rechargerListe="rechargerListe" />
    </b-card>
  </div>
</template>

<script>
  import Table from "./components/Table";
  export default {
    // naam
    name: "app",
    // gebruikte componenten
    components: {
      Table
    },
    // interne status
    data() {
      return {
        // lijst met simulaties
        lignes: [
          { id: 3, marié: "oui", enfants: 2, salaire: 35000, impôt: 1200 },
          { id: 5, marié: "non", enfants: 2, salaire: 35000, impôt: 1900 },
          { id: 7, marié: "non", enfants: 0, salaire: 30000, impôt: 2000 }
        ]
      };
    },

    // methoden
    methods: {
      // een regel verwijderen
      supprimerLigne(index) {
        // eslint-disable-next-line
        console.log("App supprimerLigne", index);
        // regel verwijderen op positie [index]
        this.lignes.splice(index, 1);
      },
      // de regeltabel opnieuw laden
      rechargerListe() {
        // eslint-disable-next-line
        console.log("App rechargerListe");
        // de lijst met regels wordt opnieuw gegenereerd
        this.lignes = [
          { id: 3, marié: "oui", enfants: 2, salaire: 35000, impôt: 1200 },
          { id: 5, marié: "non", enfants: 2, salaire: 35000, impôt: 1900 },
          { id: 7, marié: "non", enfants: 0, salaire: 30000, impôt: 2000 }
        ];
      }
    }
  };
</script>

Opmerkingen

de hoofdweergave toont een component [Table] (regels 9, 15, 21);
regel 9: de component [Table] accepteert de parameter [:lignes], die de rijen vertegenwoordigt die in een tabel HTML moeten worden weergegeven. Deze rijen worden gedefinieerd door de regels 27-31 van de code;
regel 9: de component [Table] kan twee gebeurtenissen genereren:
- [supprimerLigne]: om een rij te verwijderen waarvan de index wordt opgegeven (regel 38);
- [rechargerListe]: om de lijst van de regels 27-31 opnieuw te genereren. We zullen namelijk zien dat de gebruiker sommige van de weergegeven regels kan verwijderen;
regels 38-43: de methode die verantwoordelijk is voor de afhandeling van de gebeurtenis [supprimerLigne]. Deze methode ontvangt als parameter de index van de te verwijderen regel;
regels 45-54: de methode die de gebeurtenis [rechargerListe] afhandelt. Door het attribuut [lignes] van regel 27 te wijzigen, wordt de component [Table] van regel 9 bijgewerkt, aangezien deze een parameter [:lignes="lignes"] heeft;

14.3. De component [Table]

De component [Table] is als volgt:


<template>
  <div>
    <!-- lege lijst -->
    <template v-if="lignes.length==0">
      <b-alert show variant="warning">
        <h4>Votre liste de simulations est vide</h4>
      </b-alert>
      <!-- knop om opnieuw te laden-->
      <b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
    </template>
    <!-- lijst is niet leeg-->
    <template v-if="lignes.length!=0">
      <b-alert show variant="primary" v-if="lignes.length==0">
        <h4>Liste de vos simulations</h4>
      </b-alert>
      <!-- simulatietabel -->
      <b-table striped hover responsive :items="lignes" :fields="fields">
        <template v-slot:cell(action)="row">
          <b-button variant="link" @click="supprimerLigne(row.index)">Supprimer</b-button>
        </template>
      </b-table>
    </template>
  </div>
</template>

<script>
  export default {
    // eigenschappen
    props: {
      lignes: {
        type: Array
      }
    },
    // interne status
    data() {
      return {
        fields: [
          { label: "#", key: "id" },
          { label: "Marié", key: "marié" },
          { label: "Nombre d'enfants", key: "enfants" },
          { label: "Salaire", key: "salaire" },
          { label: "Impôt", key: "impôt" },
          { label: "", key: "action" }
        ]
      };
    },
    // methoden
    methods: {
      // een regel verwijderen
      supprimerLigne(index) {
        // eslint-disable-next-line
        console.log("Table supprimerLigne", index);
        // de informatie wordt doorgegeven aan de bovenliggende component
        this.$emit("supprimerLigne", index);
      },
      // de weergegeven lijst opnieuw laden
      rechargerListe() {
        // eslint-disable-next-line
        console.log("Table rechargerListe");
        // er wordt een gebeurtenis naar de bovenliggende component verzonden
        this.$emit("rechargerListe");
      }
    }
  };
</script>

Opmerkingen

Deze component heeft twee statussen:

het geeft een lijst weer in een tabel HTML;
ofwel een melding dat de weer te geven lijst leeg is;

De eerste status wordt weergegeven als aan de voorwaarde [lignes.length!=0] is voldaan (regel 12):

De tweede wordt weergegeven als aan de voorwaarde [lignes.length==0] is voldaan (regel 4).

[lignes] is een invoerparameter van de component (regels 29-33);
regels 4-10: in plaats van een codeblok met een <div>-tag in te voegen, is hier een <template>-tag gebruikt. Het verschil tussen beide is dat de <template>-tag niet wordt opgenomen in de gegenereerde HTML-code;
regel 9: wanneer de lijst die door de tabel HTML wordt weergegeven leeg is, biedt een knop de mogelijkheid om deze opnieuw te genereren. Wanneer op deze knop wordt geklikt, wordt de methode [rechargerListe] uit de regels 57-62 uitgevoerd. Deze methode stuurt alleen de gebeurtenis [rechargerListe] naar de bovenliggende component, die de bovenliggende component vraagt om de lijst die wordt weergegeven door tabel HTML opnieuw te genereren;
regels 12-22: de code die wordt weergegeven wanneer de weer te geven lijst niet leeg is;
regel 17: de tag <b-table> is de tag die een tabel HTML genereert. De hier gebruikte attributen zijn de volgende:
- [striped]: de achtergrondkleur van de rijen wisselt af. Er is een kleur voor de even rijen en een andere voor de oneven rijen. Dit verbetert de leesbaarheid;
- [hover]: de rij waar de muis overheen beweegt, verandert van kleur;
- [responsive]: de grootte van de tabel past zich aan het scherm aan waarop deze wordt weergegeven;
- [:items]: de array met de weer te geven elementen. Hier is de array [lignes] als parameter doorgegeven aan de component (regels 30-32);
- [:fields]: een array die de opmaak van de tabel HTML definieert (regels 37-44);
  - elk element van de array [fields] definieert een kolom van de tabel HTML;
  - [label]: geeft de kolomkop aan;
  - [key]: geeft de inhoud van de kolom aan;
regel 38: definieert kolom 0 van de tabel HTML:
- [#]: is de kolomkop;
- [id]: is de inhoud ervan. Het veld [id] van de weergegeven regel vult kolom 0 in;
rij 39: definieert kolom 1 van de tabel HTML:
- [Marié]: is de titel van de kolom;
- [marié]: is de inhoud ervan. Het veld [marié] van de weergegeven rij vult kolom 0 in;
rij 43: definieert de laatste kolom van de tabel HTML:
- de kolom heeft geen titel;
- de inhoud ervan wordt bepaald door een veld [action], een veld dat niet voorkomt in de weergegeven rijen. Naar deze sleutel wordt verwezen in rij 18 van [template]. De sleutel wordt hier dus uitsluitend gebruikt om een kolom te identificeren;
regels 18-20: deze code dient om de laatste kolom van de tabel HTML te definiëren, namelijk die met sleutel [action]:


<template v-slot:cell(action)="row">

De syntaxis [v-slot:cell(action)] verwijst naar de sleutelkolom [action]. Met deze syntaxis kan een kolom worden gedefinieerd wanneer de syntaxis van de tabel [fields] niet volstaat om deze te beschrijven. Hier willen we dat de laatste kolom een link bevat waarmee een rij uit de tabel HTML kan worden verwijderd:

In de syntaxis [<template v-slot:cell(action)="row">] verwijst de naam [row] naar de rij in de tabel. Je kunt elke gewenste naam gebruiken. We hadden ook [<template v-slot:cell(action)="ligne">] kunnen schrijven;

regel 19: een <b-button>-knop die wordt weergegeven als een link [variant=’link’]. Een klik op deze link zorgt ervoor dat de methode [supprimerLigne(row.index)] wordt uitgevoerd. Hier is [row] de naam die is gegeven aan de rij van de tabel HTML, rij 18 van de code;
regels 50-55: de methode [supprimerLigne];
regel 54: de gebeurtenis [supprimerLigne] wordt naar de bovenliggende component verzonden, vergezeld van het nummer van de te verwijderen regel;
regels 57-62: de methode [rechargerListe];
regel 61: de gebeurtenis [rechargerListe] wordt naar de bovenliggende component verzonden;

14.4. Uitvoering van het project

Het eerste weergegeven scherm is als volgt:

Na het verwijderen van regel 1 [1] ziet het scherm er als volgt uit:

Na het verwijderen van alle regels:

Na het klikken op de knop [2] verschijnt de lijst weer: