14. Progetto [vuejs-12]: gestione delle tabelle HTML

La struttura ad albero del progetto [vuejs-12] è la seguente:

14.1. Lo script principale [main.js]

Lo script principale torna ad essere quello che era nei primi progetti:


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

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

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

// configurazione
Vue.config.productionTip = false

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

14.2. La vista principale [App]

Il codice della vista principale [App] è il seguente:


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

<script>
  import Table from "./components/Table";
  export default {
    // nome
    name: "app",
    // componenti utilizzati
    components: {
      Table
    },
    // stato interno
    data() {
      return {
        // elenco delle simulazioni
        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 }
        ]
      };
    },

    // metodi
    methods: {
      // eliminazione di una riga
      supprimerLigne(index) {
        // eslint-disable-next-line
        console.log("App supprimerLigne", index);
        // eliminazione della riga nella posizione [index]
        this.lignes.splice(index, 1);
      },
      // ricaricamento della tabella delle righe
      rechargerListe() {
        // eslint-disable-next-line
        console.log("App rechargerListe");
        // si rigenera l'elenco delle righe
        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>

Commenti

la vista principale visualizza un componente [Table] (righe 9, 15, 21);
riga 9: il componente [Table] accetta il parametro [:lignes] che rappresenta le righe da visualizzare in una tabella HTML. Queste righe sono definite dalle righe 27-31 del codice;
riga 9: il componente [Table] può generare due eventi:
- [supprimerLigne]: per eliminare una riga di cui viene specificato l’indice (riga 38);
- [rechargerListe]: per rigenerare l’elenco delle righe 27-31. Infatti, vedremo che l’utente può eliminare alcune delle righe visualizzate;
righe 38-43: il metodo incaricato di gestire l’evento [supprimerLigne]. Riceve come parametro l’indice della riga da eliminare;
righe 45-54: il metodo incaricato di gestire l’evento [rechargerListe]. Modificando l’attributo [lignes] della riga 27, si provoca l’aggiornamento del componente [Table] della riga 9, poiché esso ha un parametro [:lignes="lignes"];

14.3. Il componente [Table]

Il componente [Table] è il seguente:


<template>
  <div>
    <!-- elenco vuoto -->
    <template v-if="lignes.length==0">
      <b-alert show variant="warning">
        <h4>Votre liste de simulations est vide</h4>
      </b-alert>
      <!-- pulsante di ricaricamento-->
      <b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
    </template>
    <!-- elenco non vuoto-->
    <template v-if="lignes.length!=0">
      <b-alert show variant="primary" v-if="lignes.length==0">
        <h4>Liste de vos simulations</h4>
      </b-alert>
      <!-- tabella delle simulazioni -->
      <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 {
    // proprietà
    props: {
      lignes: {
        type: Array
      }
    },
    // stato interno
    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" }
        ]
      };
    },
    // metodi
    methods: {
      // eliminazione di una riga
      supprimerLigne(index) {
        // eslint-disable-next-line
        console.log("Table supprimerLigne", index);
        // si passa l'informazione al componente padre
        this.$emit("supprimerLigne", index);
      },
      // ricaricamento dell'elenco visualizzato
      rechargerListe() {
        // eslint-disable-next-line
        console.log("Table rechargerListe");
        // si invia un evento al componente padre
        this.$emit("rechargerListe");
      }
    }
  };
</script>

Commenti

Questo componente ha due stati:

visualizza un elenco in una tabella HTML;
oppure un messaggio che indica che l'elenco da visualizzare è vuoto;

Il primo stato viene visualizzato se la condizione [lignes.length!=0] è soddisfatta (riga 12):

Il secondo viene visualizzato se la condizione [lignes.length==0] è soddisfatta (riga 4).

[lignes] è un parametro di input del componente (righe 29-33);
righe 4-10: invece di inserire un blocco di codice con il tag <div>, qui è stato utilizzato il tag <template>. La differenza tra i due è che il tag <template> non viene inserito nel codice HTML generato;
riga 9: quando l’elenco visualizzato dalla tabella HTML è vuoto, un pulsante propone di rigenerarlo. Quando si fa clic su questo pulsante, viene eseguito il metodo [rechargerListe] delle righe 57-62. Questo metodo si limita a inviare al componente padre l’evento [rechargerListe], che richiede al padre di rigenerare l’elenco visualizzato dalla tabella HTML;
righe 12-22: il codice visualizzato quando l’elenco da visualizzare non è vuoto;
riga 17: il tag <b-table> è quello che genera una tabella HTML. Gli attributi utilizzati in questo caso sono i seguenti:
- [striped]: il colore di sfondo delle righe è alternato. C'è un colore per le righe pari e un altro per quelle dispari. Ciò migliora la visibilità;
- [hover]: la riga su cui si passa il mouse cambia colore;
- [responsive]: le dimensioni della tabella si adattano allo schermo su cui viene visualizzata;
- [:items]: l’array degli elementi da visualizzare. In questo caso l’array [lignes] passato come parametro al componente (righe 30-32);
- [:fields]: un array che definisce l'impaginazione della tabella HTML (righe 37-44);
  - ogni elemento dell'array [fields] definisce una colonna della tabella HTML;
  - [label]: indica il titolo della colonna;
  - [key]: indica il contenuto della colonna;
riga 38: definisce la colonna 0 della tabella HTML:
- [#]: è il titolo della colonna;
- [id]: ne rappresenta il contenuto. È il campo [id] della riga visualizzata che riempirà la colonna 0;
riga 39: definisce la colonna 1 della tabella HTML:
- [Marié]: è il titolo della colonna;
- [marié]: è il suo contenuto. È il campo [marié] della riga visualizzata che riempirà la colonna 0;
riga 43: definisce l'ultima colonna della tabella HTML:
- la colonna non ha un titolo;
- il suo contenuto è definito da un campo [action], un campo che non esiste nelle righe visualizzate. Questa chiave è referenziata alla riga 18 di [template]. La chiave viene quindi utilizzata qui esclusivamente per identificare una colonna;
righe 18-20: questo codice serve a definire l’ultima colonna della tabella HTML, quella con chiave [action]:


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

La sintassi [v-slot:cell(action)] indica la colonna chiave [action]. Questa sintassi consente di definire una colonna quando la sintassi della tabella [fields] non è sufficiente per descriverla. In questo caso, vogliamo che l’ultima colonna contenga un link che consenta di eliminare una riga dalla tabella HTML:

Nella sintassi [<template v-slot:cell(action)="row">], il nome [row] indica la riga della tabella. È possibile utilizzare il nome che si desidera. Si sarebbe potuto scrivere [<template v-slot:cell(action)="ligne">];

riga 19: un pulsante <b-button> visualizzato come un link [variant=’link’]. Cliccando su questo link si avvia l’esecuzione del metodo [supprimerLigne(row.index)]. In questo caso, [row] è il nome assegnato alla riga della tabella HTML, riga 18 del codice;
righe 50-55: il metodo [supprimerLigne];
riga 54: si invia l’evento [supprimerLigne] al componente padre, accompagnato dal numero della riga da eliminare;
righe 57-62: il metodo [rechargerListe];
riga 61: si invia l’evento [rechargerListe] al componente padre;

14.4. Esecuzione del progetto

La prima vista visualizzata è la seguente:

Dopo aver eliminato la riga 1 [1], la vista diventa la seguente:

Dopo aver eliminato tutte le righe:

Dopo aver cliccato sul pulsante [2], si ottiene nuovamente l'elenco: