14. Project [vuejs-12]: Table Management HTML
The project tree for [vuejs-12] is as follows:
14.1. The main script [main.js]
The main script reverts to what it was in the early projects:
// imports
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'
// configuration
Vue.config.productionTip = false
// instantiation project [App]
new Vue({
name: "app",
render: h => h(App),
}).$mount('#app')
14.2. The main view [App]
The code for the main view [App] is as follows:
<template>
<div class="container">
<b-card>
<!-- message -->
<b-alert show variant="success" align="center">
<h4>[vuejs-12] : gestion des tables</h4>
</b-alert>
<!-- table component -->
<Table @supprimerLigne="supprimerLigne" :lignes="lignes" @rechargerListe="rechargerListe" />
</b-card>
</div>
</template>
<script>
import Table from "./components/Table";
export default {
// name
name: "app",
// components used
components: {
Table
},
// inner state
data() {
return {
// list of simulations
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 }
]
};
},
// methods
methods: {
// line deletion
supprimerLigne(index) {
// eslint-disable-next-line
console.log("App supprimerLigne", index);
// delete line at position [index]
this.lignes.splice(index, 1);
},
// reload line table
rechargerListe() {
// eslint-disable-next-line
console.log("App rechargerListe");
// regenerate the line list
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>
Comments
- The main view displays a [Table] component (lines 9, 15, 21);
- line 9: the [Table] component accepts the [:lignes] parameter, which represents the rows to be displayed in a HTML table. These rows are defined by lines 27–31 of the code;
- Line 9: The component [Table] can trigger two events:
- [supprimerLigne]: to delete a row specified by its index (line 38);
- [rechargerListe]: to regenerate the list of lines 27–31. Indeed, we will see that the user can delete some of the displayed lines;
- lines 38–43: the method responsible for handling the [supprimerLigne] event. It receives the index of the line to be deleted as a parameter;
- lines 45–54: the method responsible for handling the [rechargerListe] event. Modifying the [lignes] attribute in line 27 triggers an update to the [Table] component in line 9, since it has a [:lignes="lignes"] parameter;
14.3. The component [Table]
The [Table] component is as follows:
<template>
<div>
<!-- empty list -->
<template v-if="lignes.length==0">
<b-alert show variant="warning">
<h4>Votre liste de simulations est vide</h4>
</b-alert>
<!-- reload button-->
<b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
</template>
<!-- non-empty list-->
<template v-if="lignes.length!=0">
<b-alert show variant="primary" v-if="lignes.length==0">
<h4>Liste de vos simulations</h4>
</b-alert>
<!-- simulation table -->
<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 {
// properties
props: {
lignes: {
type: Array
}
},
// inner state
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" }
]
};
},
// methods
methods: {
// line deletion
supprimerLigne(index) {
// eslint-disable-next-line
console.log("Table supprimerLigne", index);
// information is passed to the parent component
this.$emit("supprimerLigne", index);
},
// reload displayed list
rechargerListe() {
// eslint-disable-next-line
console.log("Table rechargerListe");
// an event is sent to the parent component
this.$emit("rechargerListe");
}
}
};
</script>
Comments
This component has two states:
- it displays a list in a table HTML;
- or a message indicating that the list to be displayed is empty;
The first state is displayed if condition [lignes.length!=0] is true (line 12):
The second is displayed if condition [lignes.length==0] is true (line 4).
- [lignes] is an input parameter of the component (lines 29–33);
- lines 4–10: instead of inserting a code block with a <div> tag, a <template> tag is used here. The difference between the two is that the <template> tag is not included in the generated HTML code;
- line 9: when the list displayed by the HTML table is empty, a button offers to refresh it. When this button is clicked, the [rechargerListe] method in lines 57–62 is executed. This method simply sends the [rechargerListe] event to the parent component, which instructs the parent to regenerate the list displayed by table HTML;
- lines 12–22: the code displayed when the list to be displayed is not empty;
- line 17: the <b-table> tag is the tag that generates a HTML table. The attributes used here are as follows:
- [striped]: the background color of the rows alternates. There is one color for even rows and another for odd rows. This improves visibility;
- [hover]: the row over which the mouse hovers changes color;
- [responsive]: the table size adapts to the screen displaying it;
- [:items]: the array of elements to display. Here, the array [lignes] is passed as a parameter to the component (lines 30–32);
- [:fields]: an array defining the layout of the table HTML (lines 37–44);
- Each element of the array [fields] defines a column of the table HTML;
- [label]: specifies the column header;
- [key]: specifies the column content;
- line 38: defines column 0 of table HTML:
- [#]: is the column header;
- [id]: is its content. The [id] field from the displayed row will populate column 0;
- row 39: defines column 1 of the table HTML:
- [Marié]: is the column header;
- [marié]: is its content. The [marié] field from the displayed row will populate column 0;
- row 43: defines the last column of the table HTML:
- the column has no title;
- its content is defined by a field [action], a field that does not exist in the displayed rows. This key is referenced in row 18 of [template]. The key is therefore used here solely to identify a column;
- lines 18–20: this code is used to define the last column of the HTML table, the one with key [action]:
<template v-slot:cell(action)="row">
The syntax [v-slot:cell(action)] refers to the key column [action]. This syntax allows you to define a column when the syntax of the table [fields] is not sufficient to describe it. Here, we want the last column to contain a link that allows a row to be deleted from the table HTML:
In the [<template v-slot:cell(action)="row">] syntax, the name [row] refers to the row in the table. You can use any name you like. We could have written [<template v-slot:cell(action)="ligne">];
- row 19: a <b-button> displayed as a link [variant=’link’]. Clicking this link triggers the execution of the method [supprimerLigne(row.index)]. Here, [row] is the name given to the row of the table HTML, line 18 of the code;
- lines 50–55: the [supprimerLigne] method;
- line 54: the event [supprimerLigne] is sent to the parent component along with the number of the row to be deleted;
- lines 57–62: the [rechargerListe] method;
- line 61: the [rechargerListe] event is sent to the parent component;
14.4. Project Execution
The first view displayed is as follows:
After deleting line 1 [1], the view becomes as follows:
After deleting all lines:
After clicking the [2] button, the list reappears:
