14. Projeto [vuejs-12]: gerenciamento das tabelas HTML

A estrutura do projeto [vuejs-12] é a seguinte:

14.1. O script principal [main.js]

O script principal volta a ser o que era nos primeiros projetos:


// importações
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'

// configuração
Vue.config.productionTip = false

// instanciação do projeto [App]
new Vue({
  name: "app",
  render: h => h(App),
}).$mount('#app')

14.2. A visualização principal [App]

O código da visualização principal [App] é o seguinte:


<template>
  <div class="container">
    <b-card>
      <!-- mensagem -->
      <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",
    // componentes utilizados
    components: {
      Table
    },
    // estado interno
    data() {
      return {
        // lista de simulações
        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: {
      // exclusão de uma linha
      supprimerLigne(index) {
        // eslint-disable-next-line
        console.log("App supprimerLigne", index);
        // remoção da linha na posição [index]
        this.lignes.splice(index, 1);
      },
      // recarregamento da tabela de linhas
      rechargerListe() {
        // eslint-disable-next-line
        console.log("App rechargerListe");
        // regenerando a lista de linhas
        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>

Comentários

a visualização principal exibe um componente [Table] (linhas 9, 15, 21);
linha 9: o componente [Table] aceita o parâmetro [:lignes], que representa as linhas a serem exibidas em uma tabela HTML. Essas linhas são definidas pelas linhas 27 a 31 do código;
linha 9: o componente [Table] pode emitir dois eventos:
- [supprimerLigne]: para excluir uma linha cujo índice é fornecido (linha 38);
- [rechargerListe]: para regenerar a lista das linhas 27 a 31. De fato, veremos que o usuário pode excluir algumas das linhas exibidas;
linhas 38-43: o método responsável por gerenciar o evento [supprimerLigne]. Ele recebe como parâmetro o índice da linha a ser excluída;
linhas 45-54: o método responsável por gerenciar o evento [rechargerListe]. Ao modificar o atributo [lignes] da linha 27, provoca-se a atualização do componente [Table] da linha 9, uma vez que ele possui um parâmetro [:lignes="lignes"];

14.3. O componente [Table]

O componente [Table] é o seguinte:


<template>
  <div>
    <!-- lista vazia -->
    <template v-if="lignes.length==0">
      <b-alert show variant="warning">
        <h4>Votre liste de simulations est vide</h4>
      </b-alert>
      <!-- botão de atualização-->
      <b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
    </template>
    <!-- lista não vazia-->
    <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 de simulações -->
      <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 {
    // propriedades
    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: {
      // remoção de uma linha
      supprimerLigne(index) {
        // eslint-disable-next-line
        console.log("Table supprimerLigne", index);
        // passamos a informação para o componente pai
        this.$emit("supprimerLigne", index);
      },
      // atualização da lista exibida
      rechargerListe() {
        // eslint-disable-next-line
        console.log("Table rechargerListe");
        // envia-se um evento para o componente pai
        this.$emit("rechargerListe");
      }
    }
  };
</script>

Comentários

Este componente possui dois estados:

ele exibe uma lista em uma tabela HTML;
ou exibe uma mensagem indicando que a lista a ser exibida está vazia;

O primeiro estado é exibido se a condição [lignes.length!=0] for verificada (linha 12):

O segundo é exibido se a condição [lignes.length==0] for verificada (linha 4).

[lignes] é um parâmetro de entrada do componente (linhas 29-33);
linhas 4-10: em vez de inserir um bloco de código com a tag <div>, utilizou-se aqui a tag <template>. A diferença entre as duas é que a tag <template> não é inserida no código HTML gerado;
linha 9: quando a lista exibida pela tabela HTML está vazia, um botão oferece a opção de regenerá-la. Ao clicar nesse botão, o método [rechargerListe] das linhas 57-62 é executado. Este método se limita a enviar ao componente pai o evento [rechargerListe], que solicita ao pai que gere novamente a lista exibida pela tabela HTML;
linhas 12-22: o código exibido quando a lista a ser exibida não está vazia;
linha 17: a tag <b-table> é a tag que gera uma tabela HTML. Os atributos utilizados aqui são os seguintes:
- [striped]: a cor de fundo das linhas alterna. Há uma cor para as linhas pares e outra para as ímpares. Isso melhora a visibilidade;
- [hover]: a linha sobre a qual o cursor passa muda de cor;
- [responsive]: o tamanho da tabela se ajusta à tela em que é exibida;
- [:items]: a matriz dos elementos a serem exibidos. Aqui, a matriz [lignes] passada como parâmetro ao componente (linhas 30-32);
- [:fields]: uma matriz que define o layout da tabela HTML (linhas 37-44);
  - cada elemento da tabela [fields] define uma coluna da tabela HTML;
  - [label]: indica o título da coluna;
  - [key]: indica o conteúdo da coluna;
linha 38: define a coluna 0 da tabela HTML:
- [#]: é o título da coluna;
- [id]: é o seu conteúdo. É o campo [id] da linha exibida que preencherá a coluna 0;
linha 39: define a coluna 1 da tabela HTML:
- [Marié]: é o título da coluna;
- [marié]: é o seu conteúdo. É o campo [marié] da linha exibida que preencherá a coluna 0;
linha 43: define a última coluna da tabela HTML:
- a coluna não tem título;
- seu conteúdo é definido por um campo [action], um campo que não existe nas linhas exibidas. Essa chave é referenciada na linha 18 do [template]. A chave é, portanto, utilizada aqui apenas para identificar uma coluna;
linhas 18-20: este código serve para definir a última coluna da tabela HTML, a coluna da chave [action]:


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

A sintaxe [v-slot:cell(action)] designa a coluna-chave [action]. Essa sintaxe permite definir uma coluna quando a sintaxe da tabela [fields] não é suficiente para descrevê-la. Aqui, queremos que a última coluna contenha um link que permita excluir uma linha da tabela HTML:

Na sintaxe [<template v-slot:cell(action)="row">], o nome [row] designa a linha da tabela. É possível usar o nome que se desejar. Poderíamos ter escrito [<template v-slot:cell(action)="ligne">];

linha 19: um botão <b-button> exibido como um link [variant=’link’]. Um clique nesse link faz com que o método [supprimerLigne(row.index)] seja executado. Aqui, [row] é o nome dado à linha da tabela HTML, linha 18 do código;
linhas 50-55: o método [supprimerLigne];
linha 54: é emitido o evento [supprimerLigne] para o componente pai, acompanhado do número da linha a ser excluída;
linhas 57-62: o método [rechargerListe];
linha 61: é enviado o evento [rechargerListe] para o componente pai;

14.4. Execução do projeto

A primeira visualização exibida é a seguinte:

Após excluir a linha 1 [1], a visualização passa a ser a seguinte:

Após excluir todas as linhas:

Após clicar no botão [2], obtém-se novamente a lista: