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

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

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

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

// الاستيرادات
import Vue from 'vue'
import App from './App.vue'

// المكونات الإضافية
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

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

// التكوين
Vue.config.productionTip = false

// إنشاء مثيل للمشروع [App]
new Vue({
  name: "app",
  render: h => h(App),
}).$mount('#التطبيق')

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

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

<template>
  <div class="container">
    <b-card>
      <!-- رسالة -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-12] : gestion des tables</h4>
      </b-alert>
      <!-- مكون Table -->
      <Table @supprimerLigne="supprimerLigne" :lignes="lignes" @rechargerListe="rechargerListe" />
    </b-card>
  </div>
</template>

<script>
  import Table from "./components/Table";
  export default {
    // الاسم
    name: "app",
    // المكونات المستخدمة
    components: {
      Table
    },
    // الحالة الداخلية
    data() {
      return {
        // قائمة عمليات المحاكاة
        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: {
      // حذف سطر
      supprimerLigne(index) {
        // eslint-disable-next-line
        console.log("App supprimerLigne", index);
        // حذف السطر عند الموضع [index]
        this.lignes.splice(index, 1);
      },
      // إعادة تحميل جدول الأسطر
      rechargerListe() {
        // eslint-disable-next-line
        console.log("App rechargerListe");
        // إعادة إنشاء قائمة الأسطر
        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] المعلمة [:lignes] التي تمثل الأسطر المراد عرضها في جدول HTML. يتم تحديد هذه الأسطر من خلال الأسطر 27-31 من الكود؛
• السطر 9: يمكن للمكون [Table] إصدار حدثين:
  • [supprimerLigne]: لحذف سطر يتم تحديد مؤشره (السطر 38)؛
  • [rechargerListe]: لإعادة إنشاء قائمة الأسطر 27-31. في الواقع، سنرى أن المستخدم يمكنه حذف بعض الأسطر المعروضة؛
• الأسطر 38-43: الطريقة المسؤولة عن إدارة الحدث [supprimerLigne]. تتلقى كمعلمة رقم ترتيب السطر المراد حذفه؛
• الأسطر 45-54: الطريقة المسؤولة عن إدارة الحدث [rechargerListe]. عند تعديل السمة [lignes] في السطر 27، يتم تحديث المكون [Table] في السطر 9، نظرًا لوجود معلمة [:lignes="lignes"] فيه؛

14.3. المكون [Table]

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

<template>
  <div>
    <!-- قائمة فارغة -->
    <template v-if="lignes.length==0">
      <b-alert show variant="warning">
        <h4>Votre liste de simulations est vide</h4>
      </b-alert>
      <!-- زر إعادة التحميل-->
      <b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
    </template>
    <!-- قائمة غير فارغة-->
    <template v-if="lignes.length!=0">
      <b-alert show variant="primary" v-if="lignes.length==0">
        <h4>Liste de vos simulations</h4>
      </b-alert>
      <!-- جدول عمليات المحاكاة -->
      <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 {
    // الخصائص
    props: {
      lignes: {
        type: Array
      }
    },
    // الحالة الداخلية
    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: {
      // حذف سطر
      supprimerLigne(index) {
        // eslint-disable-next-line
        console.log("Table supprimerLigne", index);
        // نقل المعلومات إلى المكون الأصلي
        this.$emit("supprimerLigne", index);
      },
      // إعادة تحميل القائمة المعروضة
      rechargerListe() {
        // eslint-disable-next-line
        console.log("Table rechargerListe");
        // إرسال حدث إلى المكون الأصلي
        this.$emit("rechargerListe");
      }
    }
  };
</script>

تعليقات

لهذا المكون حالتان:

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

يتم عرض الحالة الأولى إذا تم استيفاء الشرط [lignes.length!=0] (السطر 12):

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

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

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

14.4. تنفيذ المشروع

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

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

بعد حذف جميع الأسطر:

بعد النقر على الزر [2]، تظهر القائمة مرة أخرى: