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);

// بوت‌استرپ
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('#app')

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 @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] را نمایش می‌دهد (خطوط ۹، ۱۵، ۲۱)؛
• خط ۹: کامپوننت [Table] پارامتر [:lignes] را می‌پذیرد که نمایانگر سطرهای قابل نمایش در جدول HTML است. این سطرها توسط خطوط ۲۷–۳۱ کد تعریف شده‌اند؛
• خط ۹: کامپوننت [Table] قادر است دو رویداد را فعال کند:
  • [supprimerLigne]: برای حذف ردیفی که با شاخص آن مشخص شده است (خط ۳۸);
  • [rechargerListe]: برای بازتولید لیست خطوط 27–31. در واقع، خواهیم دید که کاربر می‌تواند برخی از خطوط نمایش‌داده‌شده را حذف کند؛
• خطوط ۳۸–۴۳: متد مسئول رسیدگی به رویداد [supprimerLigne]. این متد شاخص خطی را که باید حذف شود به‌عنوان پارامتر می‌پذیرد؛
• خطوط ۴۵–۵۴: متد مسئول رسیدگی به رویداد [rechargerListe]. تغییر ویژگی [lignes] در خط ۲۷، به‌روزرسانی کامپوننت [Table] در خط ۹ را تحریک می‌کند، زیرا این کامپوننت دارای پارامتر [: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] برقرار باشد (خط ۱۲):

دومی در صورتی نمایش داده می‌شود که شرط [lignes.length==0] برقرار باشد (خط ۴).

• [lignes] یک پارامتر ورودی برای کامپوننت است (خطوط 29–33)؛
• خطوط ۴–۱۰: به جای درج یک بلوک کد با استفاده از تگ ، در اینجا از تگ <template> استفاده شده است. تفاوت بین این دو در این است که تگ <template> در کد تولید شده HTML گنجانده نمی‌شود؛
• خط ۹: هنگامی که فهرست نمایش‌داده‌شده توسط جدول HTML خالی است، دکمه‌ای برای تازه‌سازی آن ارائه می‌شود. وقتی این دکمه کلیک می‌شود، متد [rechargerListe] در خطوط ۵۷–۶۲ اجرا می‌شود. این متد به سادگی رویداد [rechargerListe] را به کامپوننت والد ارسال می‌کند و به آن دستور می‌دهد که لیست نمایش داده شده توسط جدول HTML را مجدداً تولید کند؛
• خطوط ۱۲–۲۲: کدی که زمانی نمایش داده می‌شود که لیست مورد نظر برای نمایش خالی نیست؛
• خط ۱۷: تگ <b-table> تگی است که جدول HTML را تولید می‌کند. ویژگی‌های به‌کاررفته در اینجا به شرح زیر هستند:
  • [striped]: رنگ پس‌زمینه سطرها به صورت متناوب تغییر می‌کند. یک رنگ برای سطرهای زوج و رنگ دیگری برای سطرهای فرد وجود دارد. این امر خوانایی را بهبود می‌بخشد؛
  • [hover]: ردیفی که ماوس روی آن قرار می‌گیرد، رنگش تغییر می‌کند؛
  • [responsive]: اندازه جدول با اندازه صفحه‌ای که آن را نمایش می‌دهد، تطبیق می‌یابد؛
  • [:items]: آرایهٔ عناصری که باید نمایش داده شوند. در اینجا، آرایهٔ [lignes] به‌عنوان پارامتر به کامپوننت ارسال می‌شود (خطوط ۳۰–۳۲);
  • [:fields]: آرایه‌ای که طرح‌بندی جدول HTML را تعریف می‌کند (خطوط ۳۷–۴۴);
    • هر عنصر از آرایه [fields] یک ستون را در جدول HTML تعریف می‌کند؛
    • [label]: نشان‌دهنده سرستون است؛
    • [key]: محتوای ستون را مشخص می‌کند؛
• خط ۳۸: ستون ۰ جدول HTML را تعریف می‌کند:
  • [#]: سربرگ ستون است؛
  • [id]: محتوای آن است. این فیلد [id] از سطر نمایش‌داده‌شده است که ستون 0 را پر خواهد کرد؛
• ردیف ۳۹: ستون ۱ جدول HTML را تعریف می‌کند:
  • [Marié]: سربرگ ستون است؛
  • [marié]: محتوای آن است. این فیلد [marié] از سطر نمایش‌داده‌شده است که ستون 0 را پر خواهد کرد؛
• ردیف ۴۳: ستون آخر جدول HTML را تعریف می‌کند:
  • این ستون هیچ عنوانی ندارد؛
  • محتوای آن توسط فیلدی به نام [action] تعریف می‌شود، فیلدی که در ردیف‌های نمایش‌داده‌شده وجود ندارد. این کلید در ردیف ۱۸ از [template] ارجاع داده شده است. بنابراین، این کلید در اینجا صرفاً برای شناسایی یک ستون استفاده می‌شود؛
• خطوط ۱۸–۲۰: این کد برای تعریف آخرین ستون جدول 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">] را بنویسید؛

• خط ۱۹: یک <b-button> که به صورت یک لینک [variant=’link’] نمایش داده می‌شود. کلیک بر روی این لینک، اجرای متد [supprimerLigne(row.index)] را تحریک می‌کند. در اینجا، [row] نامی است که به سطر جدول HTML، خط ۱۸ کد، داده شده است؛
• خطوط ۵۰–۵۵: متد [supprimerLigne];
• خط ۵۴: رویداد [supprimerLigne] به همراه شماره ردیف حذف‌شدنی به کامپوننت والد ارسال می‌شود؛
• خطوط ۵۷–۶۲: متد [rechargerListe]؛
• خط ۶۱: رویداد [rechargerListe] به کامپوننت والد ارسال می‌شود؛

14.4. اجرای پروژه

نمای اول نمایش داده شده به شرح زیر است:

پس از حذف خط ۱ ([1])، نما به صورت زیر درمی‌آید:

پس از حذف تمام خطوط:

پس از کلیک روی دکمه [2]، لیست به شکل زیر دوباره ظاهر می‌شود: