14. Proyecto [vuejs-12]: gestión de tablas HTML

El árbol del proyecto [vuejs-12] es el siguiente:

14.1. El script principal [main.js]

El script principal vuelve a ser lo que era en los primeros proyectos:


// importaciones
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'

// configuración
Vue.config.productionTip = false

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

14.2. La vista principal [App]

El código de la vista principal [App] es el siguiente:


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

<script>
  import Table from "./components/Table";
  export default {
    // nombre
    name: "app",
    // componentes utilizados
    components: {
      Table
    },
    // estado interno
    data() {
      return {
        // lista de simulaciones
        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 }
        ]
      };
    },

    // métodos
    methods: {
      // eliminación de una línea
      supprimerLigne(index) {
        // eslint-disable-next-line
        console.log("App supprimerLigne", index);
        // eliminación de línea en la posición [index]
        this.lignes.splice(index, 1);
      },
      // recarga de la tabla de líneas
      rechargerListe() {
        // eslint-disable-next-line
        console.log("App rechargerListe");
        // se regenera la lista de líneas
        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>

Comentarios

la vista principal muestra un componente [Table] (líneas 9, 15, 21);
línea 9: el componente [Table] admite el parámetro [:lignes], que representa las líneas que se deben mostrar en una tabla HTML. Estas líneas se definen en las líneas 27-31 del código;
línea 9: el componente [Table] puede emitir dos eventos:
- [supprimerLigne]: para eliminar una línea cuyo índice se indica (línea 38);
- [rechargerListe]: para regenerar la lista de las líneas 27-31. De hecho, veremos que el usuario puede eliminar algunas de las líneas mostradas;
líneas 38-43: el método encargado de gestionar el evento [supprimerLigne]. Recibe como parámetro el índice de la línea que se va a eliminar;
líneas 45-54: el método encargado de gestionar el evento [rechargerListe]. Al modificar el atributo [lignes] de la línea 27, se provoca la actualización del componente [Table] de la línea 9, ya que tiene un parámetro [:lignes="lignes"];

14.3. El componente [Table]

El componente [Table] es el siguiente:


<template>
  <div>
    <!-- lista vacía -->
    <template v-if="lignes.length==0">
      <b-alert show variant="warning">
        <h4>Votre liste de simulations est vide</h4>
      </b-alert>
      <!-- botón de recarga-->
      <b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
    </template>
    <!-- lista no vacía-->
    <template v-if="lignes.length!=0">
      <b-alert show variant="primary" v-if="lignes.length==0">
        <h4>Liste de vos simulations</h4>
      </b-alert>
      <!-- tabla de simulaciones -->
      <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 {
    // propiedades
    props: {
      lignes: {
        type: Array
      }
    },
    // estado 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" }
        ]
      };
    },
    // métodos
    methods: {
      // eliminación de una línea
      supprimerLigne(index) {
        // eslint-disable-next-line
        console.log("Table supprimerLigne", index);
        // se pasa la información al componente padre
        this.$emit("supprimerLigne", index);
      },
      // recarga de la lista mostrada
      rechargerListe() {
        // eslint-disable-next-line
        console.log("Table rechargerListe");
        // se envía un evento al componente padre
        this.$emit("rechargerListe");
      }
    }
  };
</script>

Comentarios

Este componente tiene dos estados:

muestra una lista en una tabla HTML;
o bien un mensaje que indica que la lista que se va a mostrar está vacía;

El primer estado se muestra si se cumple la condición [lignes.length!=0] (línea 12):

El segundo se muestra si se cumple la condición [lignes.length==0] (línea 4).

[lignes] es un parámetro de entrada del componente (líneas 29-33);
líneas 4-10: en lugar de introducir un bloque de código con una etiqueta <div>, aquí se ha utilizado una etiqueta <template>. La diferencia entre ambas es que la etiqueta <template> no se inserta en el código HTML generado;
línea 9: cuando la lista mostrada por la tabla HTML está vacía, un botón ofrece la posibilidad de regenerarla. Al hacer clic en este botón, se ejecuta el método [rechargerListe] de las líneas 57-62. Este se limita a enviar al componente padre el evento [rechargerListe], que solicita al padre que regenere la lista mostrada por la tabla HTML;
líneas 12-22: el código que se muestra cuando la lista que se va a mostrar no está vacía;
línea 17: la etiqueta <b-table> es la que genera una tabla HTML. Los atributos utilizados aquí son los siguientes:
- [striped]: el color de fondo de las filas se alterna. Hay un color para las filas pares y otro para las impares. Esto mejora la visibilidad;
- [hover]: la línea sobre la que se pasa el ratón cambia de color;
- [responsive]: el tamaño de la tabla se adapta a la pantalla en la que se muestra;
- [:items]: la matriz de los elementos que se van a mostrar. Aquí, la matriz [lignes] pasada como parámetro al componente (líneas 30-32);
- [:fields]: una matriz que define el diseño de la tabla HTML (líneas 37-44);
  - cada elemento de la tabla [fields] define una columna de la tabla HTML;
  - [label]: indica el título de la columna;
  - [key]: indica el contenido de la columna;
línea 38: define la columna 0 de la tabla HTML:
- [#]: es el título de la columna;
- [id]: es su contenido. El campo [id] de la línea mostrada es el que rellenará la columna 0;
línea 39: define la columna 1 de la tabla HTML:
- [Marié]: es el título de la columna;
- [marié]: es su contenido. Es el campo [marié] de la línea mostrada el que rellenará la columna 0;
línea 43: define la última columna de la tabla HTML:
- la columna no tiene título;
- su contenido viene definido por un campo [action], un campo que no existe en las líneas mostradas. Esta clave se referencia en la línea 18 de [template]. Por lo tanto, la clave se utiliza aquí únicamente para identificar una columna;
líneas 18-20: este código sirve para definir la última columna de la tabla HTML, la de clave [action]:


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

La sintaxis [v-slot:cell(action)] designa la columna de clave [action]. Esta sintaxis permite definir una columna cuando la sintaxis de la tabla [fields] no es suficiente para describirla. En este caso, queremos que la última columna contenga un enlace que permita eliminar una fila de la tabla HTML:

En la sintaxis [<template v-slot:cell(action)="row">], el nombre [row] designa la fila de la tabla. Se puede utilizar el nombre que se desee. Se podría haber escrito [<template v-slot:cell(action)="ligne">];

línea 19: un botón <b-button> que se muestra como un enlace [variant=’link’]. Al hacer clic en este enlace se ejecuta el método [supprimerLigne(row.index)]. Aquí, [row] es el nombre dado a la fila de la tabla HTML, fila 18 del código;
líneas 50-55: el método [supprimerLigne];
línea 54: se envía el evento [supprimerLigne] al componente padre, acompañado del número de la línea que se va a eliminar;
líneas 57-62: el método [rechargerListe];
línea 61: se envía el evento [rechargerListe] al componente padre;

14.4. Ejecución del proyecto

La primera vista que se muestra es la siguiente:

Tras eliminar la línea 1 [1], la vista queda así:

Tras eliminar todas las líneas:

Tras hacer clic en el botón [2], se vuelve a obtener la lista: