14. المشروع [vuejs-12]: إدارة جداول HTML

هيكل دليل مشروع [vuejs-12] هو كما يلي:

14.1. البرنامج النصي الرئيسي [main.js]

يعود البرنامج النصي الرئيسي إلى ما كان عليه في المشاريع السابقة:

// 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
 
// instanciation projet [App]
new Vue({
  name: "app",
  render: h => h(App),
}).$mount('#app')

14.2. الطريقة الرئيسية [App]

فيما يلي كود العرض الرئيسي [App]:

<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 {
    // nom
    name: "app",
    // composants utilisés
    components: {
      Table
    },
    // état interne
    data() {
      return {
        // liste des 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 }
        ]
      };
    },
 
    // méthodes
    methods: {
      // suppression d'une ligne
      supprimerLigne(index) {
        // eslint-disable-next-line
        console.log("App supprimerLigne", index);
        // suppression ligne à la position [index]
        this.lignes.splice(index, 1);
      },
      // rechargement de la table des lignes
      rechargerListe() {
        // eslint-disable-next-line
        console.log("App rechargerListe");
        // on régénère la liste des lignes
        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>

تعليقات

• تعرض الواجهة الرئيسية مكون [Table] (الأسطر 9 و15 و21)؛
• السطر 9: يقبل مكون [Table] المعلمة [:rows]، التي تمثل الصفوف المراد عرضها في جدول HTML. يتم تعريف هذه الصفوف في الأسطر 27–31 من الكود؛
• السطر 9: يمكن لمكون [Table] تشغيل حدثين:
  • [deleteRow]: لحذف صف عن طريق تحديد مؤشره (السطر 38)؛
  • [reloadList]: لإعادة إنشاء القائمة في الأسطر 27-31. في الواقع، سنرى أن المستخدم يمكنه حذف بعض الصفوف المعروضة؛
• الأسطر 38-43: الطريقة المسؤولة عن معالجة حدث [deleteRow]. تتلقى مؤشر الصف المراد حذفه كمعلمة؛
• الأسطر 45-54: الطريقة المسؤولة عن معالجة حدث [reloadList]. من خلال تعديل السمة [rows] في السطر 27، نقوم بتشغيل تحديث لمكون [Table] في السطر 9، نظرًا لوجود معلمة [:rows="rows"] فيه؛

14.3. مكون [Table]

مكون [Table] هو كما يلي:

<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 {
    // propriétés
    props: {
      lignes: {
        type: Array
      }
    },
    // état interne
    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éthodes
    methods: {
      // suppression d'une ligne
      supprimerLigne(index) {
        // eslint-disable-next-line
        console.log("Table supprimerLigne", index);
        // on passe l'information au composant parent
        this.$emit("supprimerLigne", index);
      },
      // rechargement de la liste affichée
      rechargerListe() {
        // eslint-disable-next-line
        console.log("Table rechargerListe");
        // on émet un événement vers le composant parent
        this.$emit("rechargerListe");
      }
    }
  };
</script>

تعليقات

يحتوي هذا المكون على حالتين:

1. يعرض قائمة في جدول HTML؛
2. أو رسالة تشير إلى أن القائمة المراد عرضها فارغة؛

يتم عرض الحالة الأولى إذا كان الشرط [lines.length!=0] صحيحًا (السطر 12):

يتم عرض الحالة الثانية إذا كان الشرط [lines.length==0] صحيحًا (السطر 4).

• [lines] هي معلمة إدخال للمكون (الأسطر 29–33)؛
• الأسطر 4–10: بدلاً من إدراج كتلة كود بعلامة <div>، استخدمنا هنا علامة <template>. الفرق بين الاثنين هو أن علامة <template> لا يتم تضمينها في كود HTML الذي تم إنشاؤه؛
• السطر 9: عندما تكون القائمة المعروضة بواسطة جدول HTML فارغة، يظهر زر لتجديدها. عند النقر على هذا الزر، يتم تنفيذ الأسلوب [reloadList] في الأسطر 57–62. يقوم هذا الأسلوب ببساطة بإرسال حدث [reloadList] إلى المكون الأصلي، مما يوجه المكون الأصلي إلى إعادة إنشاء القائمة المعروضة بواسطة جدول HTML؛
• الأسطر 12-22: الكود المعروض عندما تكون القائمة المراد عرضها غير فارغة؛
• السطر 17: العلامة <b-table> هي العلامة التي تنشئ جدول HTML. والسمات المستخدمة هنا هي كما يلي:
  • [striped]: يتناوب لون خلفية الصفوف. هناك لون واحد للصفوف الزوجية ولون آخر للصفوف الفردية. وهذا يحسن الرؤية؛
  • [hover]: يتغير لون الصف الذي يمر فوقه الماوس؛
  • [responsive]: يتكيف حجم الجدول مع الشاشة التي تعرضه؛
  • [:items]: مصفوفة العناصر المراد عرضها. هنا، يتم تمرير مصفوفة [rows] كمعلمة إلى المكون (الأسطر 30–32)؛
  • [:fields]: مصفوفة تحدد تخطيط جدول HTML (الأسطر 37–44)؛
    • يحدد كل عنصر في مصفوفة [fields] عمودًا في جدول HTML؛
    • [label]: يحدد عنوان العمود؛
    • [key]: يحدد محتوى العمود؛
• السطر 38: يحدد العمود 0 من جدول HTML:
  • [#]: هو عنوان العمود؛
  • [id]: هو محتواه. حقل [id] للصف المعروض هو الذي سيملأ العمود 0؛
• السطر 39: يحدد العمود 1 من جدول HTML:
  • [Married]: هو عنوان العمود؛
  • [married]: هو محتواه. وهو حقل [married] للصف المعروض الذي سيملأ العمود 0؛
• السطر 43: يحدد العمود الأخير من جدول HTML:
  • لا يحتوي العمود على عنوان؛
  • يتم تحديد محتواه بواسطة حقل [action]، وهو حقل غير موجود في الصفوف المعروضة. تتم الإشارة إلى هذا المفتاح في السطر 18 من [القالب]. وبالتالي، يتم استخدام المفتاح هنا فقط لتحديد عمود؛
• الأسطر 18-20: يُستخدم هذا الرمز لتعريف العمود الأخير من جدول HTML، وهو العمود الذي يحتوي على المفتاح [action]:

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

تشير صيغة [v-slot:cell(action)] إلى عمود المفتاح [action]. تتيح لك هذه الصيغة تحديد عمود عندما لا تكون صيغة المصفوفة [fields] كافية لوصفه. هنا، نريد أن يحتوي العمود الأخير على رابط يتيح لك حذف صف من جدول HTML:

في صيغة [<template v-slot:cell(action)="row">]، يشير الاسم [row] إلى صف الجدول. يمكنك استخدام أي اسم تريده. كان بإمكاننا كتابة [<template v-slot:cell(action)="row">]؛

• السطر 19: زر <b-button> معروض كرابط [variant='link']. يؤدي النقر على هذا الرابط إلى تشغيل الأسلوب [supprimerLigne(row.index)]. هنا، [row] هو الاسم الممنوح للصف في جدول HTML، السطر 18 من الكود؛
• الأسطر 50-55: طريقة [deleteRow]؛
• السطر 54: يتم إرسال حدث [deleteRow] إلى المكون الأصلي مع رقم الصف المراد حذفه؛
• الأسطر 57-62: طريقة [reloadList]؛
• السطر 61: يتم إرسال حدث [reloadList] إلى المكون الأصلي؛

14.4. تشغيل المشروع

الطريقة الأولى المعروضة هي كما يلي:

بعد حذف الصف 1 [1]، تصبح الشاشة كما يلي:

بعد حذف جميع الصفوف:

بعد النقر على الزر [2]، يتم استعادة القائمة: