14. Projekt [vuejs-12]: Verwaltung der Tabellen HTML

Die Struktur des Projekts [vuejs-12] sieht wie folgt aus:

14.1. Das Hauptskript [main.js]

Das Hauptskript entspricht wieder dem aus den ersten Projekten:


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

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

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

// Konfiguration
Vue.config.productionTip = false

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

14.2. Die Hauptansicht [App]

Der Code der Hauptansicht [App] lautet wie folgt:


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

<script>
  import Table from "./components/Table";
  export default {
    // Name
    name: "app",
    // verwendete Komponenten
    components: {
      Table
    },
    // interner Status
    data() {
      return {
        // Liste der Simulationen
        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: {
      // Löschen einer Zeile
      supprimerLigne(index) {
        // eslint-disable-next-line
        console.log("App supprimerLigne", index);
        // Zeile an der Position [index] löschen
        this.lignes.splice(index, 1);
      },
      // Neuladen der Zeilentabelle
      rechargerListe() {
        // eslint-disable-next-line
        console.log("App rechargerListe");
        // Die Zeilenliste wird neu generiert
        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>

Anmerkungen

Die Hauptansicht zeigt eine Komponente [Table] an (Zeilen 9, 15, 21);
Zeile 9: Die Komponente [Table] akzeptiert den Parameter [:lignes], der die in einer Tabelle HTML anzuzeigenden Zeilen darstellt. Diese Zeilen werden durch die Zeilen 27–31 des Codes definiert;
Zeile 9: Die Komponente [Table] kann zwei Ereignisse auslösen:
- [supprimerLigne]: zum Löschen einer Zeile, deren Index angegeben wird (Zeile 38);
- [rechargerListe]: zum Neugenerieren der Liste der Zeilen 27–31. Wie wir noch sehen werden, kann der Benutzer nämlich einige der angezeigten Zeilen löschen;
Zeilen 38–43: Die Methode, die für die Verarbeitung des Ereignisses [supprimerLigne] zuständig ist. Sie erhält als Parameter den Index der zu löschenden Zeile;
Zeilen 45–54: Die Methode, die das Ereignis [rechargerListe] verarbeitet. Durch Ändern des Attributs [lignes] in Zeile 27 wird die Aktualisierung der Komponente [Table] in Zeile 9 ausgelöst, da diese einen Parameter [:lignes="lignes"] besitzt;

14.3. Die Komponente [Table]

Die Komponente [Table] lautet wie folgt:


<template>
  <div>
    <!-- leere Liste -->
    <template v-if="lignes.length==0">
      <b-alert show variant="warning">
        <h4>Votre liste de simulations est vide</h4>
      </b-alert>
      <!-- Schaltfläche zum Neuladen-->
      <b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
    </template>
    <!-- Liste nicht leer-->
    <template v-if="lignes.length!=0">
      <b-alert show variant="primary" v-if="lignes.length==0">
        <h4>Liste de vos simulations</h4>
      </b-alert>
      <!-- Simulationstabelle -->
      <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 {
    // Eigenschaften
    props: {
      lignes: {
        type: Array
      }
    },
    // interner 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: {
      // Löschen einer Zeile
      supprimerLigne(index) {
        // eslint-disable-next-line
        console.log("Table supprimerLigne", index);
        // Die Informationen werden an die übergeordnete Komponente weitergeleitet
        this.$emit("supprimerLigne", index);
      },
      // Neuladen der angezeigten Liste
      rechargerListe() {
        // eslint-disable-next-line
        console.log("Table rechargerListe");
        // Es wird ein Ereignis an die übergeordnete Komponente gesendet
        this.$emit("rechargerListe");
      }
    }
  };
</script>

Anmerkungen

Diese Komponente hat zwei Zustände:

Sie zeigt eine Liste in einer Tabelle HTML an;
oder eine Meldung, dass die anzuzeigende Liste leer ist;

Der erste Zustand wird angezeigt, wenn die Bedingung [lignes.length!=0] erfüllt ist (Zeile 12):

Der zweite wird angezeigt, wenn die Bedingung [lignes.length==0] erfüllt ist (Zeile 4).

[lignes] ist ein Eingabeparameter der Komponente (Zeilen 29–33);
Zeilen 4–10: Anstelle eines Codeblocks mit dem Tag <div> wurde hier ein Tag <template> verwendet. Der Unterschied zwischen den beiden besteht darin, dass das Tag <template> nicht in den generierten Code HTML eingefügt wird;
Zeile 9: Wenn die von der Tabelle HTML angezeigte Liste leer ist, bietet eine Schaltfläche die Möglichkeit, sie neu zu generieren. Beim Klicken auf diese Schaltfläche wird die Methode [rechargerListe] in den Zeilen 57–62 ausgeführt. Diese sendet lediglich das Ereignis [rechargerListe] an die übergeordnete Komponente, das diese auffordert, die von der Tabelle HTML angezeigte Liste neu zu generieren;
Zeilen 12–22: Der Code, der angezeigt wird, wenn die anzuzeigende Liste nicht leer ist;
Zeile 17: Das Tag <b-table> ist das Tag, das eine Tabelle mit der ID „HTML“ erzeugt. Die hier verwendeten Attribute sind folgende:
- [striped]: Die Hintergrundfarbe der Zeilen wechselt. Es gibt eine Farbe für die geraden Zeilen und eine andere für die ungeraden Zeilen. Dies verbessert die Lesbarkeit;
- [hover]: Die Zeile, über die man mit der Maus fährt, ändert ihre Farbe;
- [responsive]: Die Größe der Tabelle passt sich dem Bildschirm an, auf dem sie angezeigt wird;
- [:items]: das Array der anzuzeigenden Elemente. Hier das Array [lignes], das als Parameter an die Komponente übergeben wird (Zeilen 30–32);
- [:fields]: Ein Array, das das Layout der Tabelle HTML definiert (Zeilen 37–44);
  - Jedes Element des Arrays [fields] definiert eine Spalte der Tabelle HTML;
  - [label]: bezeichnet die Spaltenüberschrift;
  - [key]: bezeichnet den Inhalt der Spalte;
Zeile 38: definiert die Spalte 0 der Tabelle HTML:
- [#]: ist die Spaltenüberschrift;
- [id]: ist deren Inhalt. Das Feld [id] der angezeigten Zeile füllt die Spalte 0;
Zeile 39: definiert Spalte 1 der Tabelle HTML:
- [Marié]: ist der Titel der Spalte;
- [marié]: ist dessen Inhalt. Es ist das Feld [marié] der angezeigten Zeile, das Spalte 0 ausfüllt;
Zeile 43: definiert die letzte Spalte der Tabelle HTML:
- Die Spalte hat keinen Titel;
- ihr Inhalt wird durch ein Feld [action] definiert, ein Feld, das in den angezeigten Zeilen nicht vorhanden ist. Dieser Schlüssel wird in Zeile 18 von [template] referenziert. Der Schlüssel wird hier also ausschließlich zur Identifizierung einer Spalte verwendet;
Zeilen 18–20: Dieser Code dient zur Definition der letzten Spalte der Tabelle HTML, nämlich der Spalte mit dem Schlüssel [action]:


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

Die Syntax [v-slot:cell(action)] bezeichnet die Schlüsselspalte [action]. Diese Syntax ermöglicht es, eine Spalte zu definieren, wenn die Syntax der Tabelle [fields] nicht ausreicht, um sie zu beschreiben. Hier soll die letzte Spalte einen Link enthalten, über den eine Zeile aus der Tabelle HTML gelöscht werden kann:

In der Syntax [<template v-slot:cell(action)="row">] bezeichnet der Name [row] die Zeile der Tabelle. Man kann einen beliebigen Namen verwenden. Man hätte auch [<template v-slot:cell(action)="ligne">] schreiben können;

Zeile 19: Eine Schaltfläche <b-button>, die als Link [variant=’link’] angezeigt wird. Ein Klick auf diesen Link löst die Ausführung der Methode [supprimerLigne(row.index)] aus. Hier ist [row] der Name, der der Tabellenzeile HTML, Zeile 18 des Codes, gegeben wurde;
Zeilen 50–55: die Methode [supprimerLigne];
Zeile 54: Das Ereignis [supprimerLigne] wird zusammen mit der Nummer der zu löschenden Zeile an die übergeordnete Komponente gesendet;
Zeilen 57–62: die Methode [rechargerListe];
Zeile 61: Das Ereignis [rechargerListe] wird an die übergeordnete Komponente gesendet;

14.4. Ausführung des Projekts

Die erste angezeigte Ansicht sieht wie folgt aus:

Nach dem Löschen von Zeile 1 ([1]) sieht die Ansicht wie folgt aus:

Nach dem Löschen aller Zeilen:

Nach dem Klicken auf die Schaltfläche [2] erhält man wieder die Liste: