14. Projekt [vuejs-12]: zarządzanie tabelami HTML

Struktura drzewa projektu [vuejs-12] przedstawia się następująco:

14.1. Główny skrypt [main.js]

Główny skrypt powraca do postaci znanej z pierwszych projektów:


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

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

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

// konfiguracja
Vue.config.productionTip = false

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

14.2. Główny widok [App]

Kod widoku głównego [App] wygląda następująco:


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

<script>
  import Table from "./components/Table";
  export default {
    // nazwa
    name: "app",
    // używane komponenty
    components: {
      Table
    },
    // stan wewnętrzny
    data() {
      return {
        // lista symulacji
        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 }
        ]
      };
    },

    // metody
    methods: {
      // usunięcie wiersza
      supprimerLigne(index) {
        // eslint-disable-next-line
        console.log("App supprimerLigne", index);
        // usunięcie wiersza w pozycji [index]
        this.lignes.splice(index, 1);
      },
      // odświeżenie tabeli wierszy
      rechargerListe() {
        // eslint-disable-next-line
        console.log("App rechargerListe");
        // regeneracja listy wierszy
        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>

Komentarze

widok główny wyświetla komponent [Table] (wiersze 9, 15, 21);
wiersz 9: komponent [Table] akceptuje parametr [:lignes], który określa wiersze do wyświetlenia w tabeli HTML. Wiersze te są zdefiniowane w wierszach 27–31 kodu;
wiersz 9: komponent [Table] może wygenerować dwa zdarzenia:
- [supprimerLigne]: w celu usunięcia wiersza o podanym indeksie (wiersz 38);
- [rechargerListe]: w celu ponownego wygenerowania listy wierszy 27–31. Jak bowiem zobaczymy, użytkownik może usunąć niektóre z wyświetlanych wierszy;
wiersze 38–43: metoda odpowiedzialna za obsługę zdarzenia [supprimerLigne]. Otrzymuje ona jako parametr indeks wiersza, który ma zostać usunięty;
wiersze 45–54: metoda odpowiedzialna za obsługę zdarzenia [rechargerListe]. Zmiana atrybutu [lignes] w wierszu 27 powoduje aktualizację komponentu [Table] w wierszu 9, ponieważ posiada on parametr [:lignes="lignes"];

14.3. Komponent [Table]

Komponent [Table] ma następującą postać:


<template>
  <div>
    <!-- pusta lista -->
    <template v-if="lignes.length==0">
      <b-alert show variant="warning">
        <h4>Votre liste de simulations est vide</h4>
      </b-alert>
      <!-- przycisk odświeżania-->
      <b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
    </template>
    <!-- lista niepusta-->
    <template v-if="lignes.length!=0">
      <b-alert show variant="primary" v-if="lignes.length==0">
        <h4>Liste de vos simulations</h4>
      </b-alert>
      <!-- tabela symulacji -->
      <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 {
    // właściwości
    props: {
      lignes: {
        type: Array
      }
    },
    // stan wewnętrzny
    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" }
        ]
      };
    },
    // metody
    methods: {
      // usunięcie wiersza
      supprimerLigne(index) {
        // eslint-disable-next-line
        console.log("Table supprimerLigne", index);
        // przekazywanie informacji do komponentu nadrzędnego
        this.$emit("supprimerLigne", index);
      },
      // odświeżanie wyświetlanej listy
      rechargerListe() {
        // eslint-disable-next-line
        console.log("Table rechargerListe");
        // wysyłamy zdarzenie do komponentu nadrzędnego
        this.$emit("rechargerListe");
      }
    }
  };
</script>

Uwagi

Ten komponent ma dwa stany:

wyświetla listę w tabeli HTML;
albo komunikat informujący, że lista do wyświetlenia jest pusta;

Pierwszy stan jest wyświetlany, jeśli spełniony jest warunek [lignes.length!=0] (wiersz 12):

Drugi jest wyświetlany, jeśli spełniony jest warunek [lignes.length==0] (wiersz 4).

[lignes] jest parametrem wejściowym komponentu (wiersze 29–33);
wiersze 4–10: zamiast wprowadzać blok kodu za pomocą tagu <div>, zastosowano tutaj tag <template>. Różnica między nimi polega na tym, że tag <template> nie jest wstawiany do wygenerowanego kodu HTML;
wiersz 9: gdy lista wyświetlana przez tabelę HTML jest pusta, pojawia się przycisk umożliwiający jej odświeżenie. Po kliknięciu tego przycisku wykonywana jest metoda [rechargerListe] z wierszy 57–62. Metoda ta ogranicza się do wysłania do komponentu nadrzędnego zdarzenia [rechargerListe], które żąda od komponentu nadrzędnego odświeżenia listy wyświetlanej przez tabelę HTML;
wiersze 12–22: kod wyświetlany, gdy lista do wyświetlenia nie jest pusta;
wiersz 17: tag <b-table> służy do wygenerowania tabeli o nazwie HTML. Zastosowano w nim następujące atrybuty:
- [striped]: kolor tła wierszy zmienia się naprzemiennie. Wiersze parzyste mają jeden kolor, a nieparzyste – inny. Poprawia to czytelność;
- [hover]: wiersz, nad którym znajduje się kursor myszy, zmienia kolor;
- [responsive]: rozmiar tabeli dostosowuje się do ekranu, na którym jest wyświetlana;
- [:items]: tablica elementów do wyświetlenia. Tutaj tablica [lignes] przekazana jako parametr do komponentu (wiersze 30–32);
- [:fields]: tablica definiująca układ tabeli HTML (wiersze 37–44);
  - każdy element tablicy [fields] definiuje kolumnę tabeli HTML;
  - [label]: określa nagłówek kolumny;
  - [key]: określa zawartość kolumny;
wiersz 38: definiuje kolumnę 0 tabeli HTML:
- [#]: to nazwa kolumny;
- [id]: to jej zawartość. Kolumnę 0 wypełni pole [id] z wyświetlanego wiersza;
wiersz 39: definiuje kolumnę 1 tabeli HTML:
- [Marié]: to nazwa kolumny;
- [marié]: to jego zawartość. To pole [marié] z wyświetlanego wiersza wypełni kolumnę 0;
wiersz 43: definiuje ostatnią kolumnę tabeli HTML:
- kolumna nie ma tytułu;
- jej zawartość jest określona przez pole [action], które nie występuje w wyświetlanych wierszach. Klucz ten jest odwołany w wierszu 18 tabeli [template]. Klucz ten służy zatem wyłącznie do identyfikacji kolumny;
wiersze 18–20: kod ten służy do zdefiniowania ostatniej kolumny tabeli HTML, czyli kolumny o kluczu [action]:


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

Składnia [v-slot:cell(action)] określa kolumnę klucza [action]. Składnia ta pozwala zdefiniować kolumnę, gdy składnia tabeli [fields] nie wystarcza do jej opisu. W tym przypadku chcemy, aby ostatnia kolumna zawierała link umożliwiający usunięcie wiersza z tabeli HTML:

W składni [<template v-slot:cell(action)="row">] nazwa [row] oznacza wiersz tabeli. Można użyć dowolnej nazwy. Można było napisać [<template v-slot:cell(action)="ligne">];

wiersz 19: przycisk <b-button> wyświetlany jako link [variant=’link’]. Kliknięcie tego linku powoduje wykonanie metody [supprimerLigne(row.index)]. Tutaj [row] to nazwa nadana wierszowi tabeli HTML, wiersz 18 kodu;
wiersze 50–55: metoda [supprimerLigne];
wiersz 54: wysyłamy zdarzenie [supprimerLigne] do komponentu nadrzędnego wraz z numerem wiersza, który ma zostać usunięty;
wiersze 57–62: metoda [rechargerListe];
wiersz 61: wysyłane jest zdarzenie [rechargerListe] do komponentu nadrzędnego;

14.4. Wykonanie projektu

Pierwszy wyświetlany widok wygląda następująco:

Po usunięciu wiersza 1 [1] widok wygląda następująco:

Po usunięciu wszystkich wierszy:

Po kliknięciu przycisku [2] ponownie pojawia się lista: