14. [vuejs-12] projesi: HTML tablolarının yönetimi

[vuejs-12] projesinin dizin yapısı şu şekildedir:

14.1. Ana komut dosyası [main.js]

Ana komut dosyası, ilk projelerdeki haline geri dönmüştür:


// ithalatlar
import Vue from 'vue'
import App from './App.vue'

// eklentiler
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

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

// yapılandırma
Vue.config.productionTip = false

// proje örneği oluşturma [App]
new Vue({
  name: "app",
  render: h => h(App),
}).$mount('#uygulama')

14.2. Ana görünüm [App]

[App] ana görünümünün kodu şöyledir:


<template>
  <div class="container">
    <b-card>
      <!-- mesaj -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-12] : gestion des tables</h4>
      </b-alert>
      <!-- Table bileşeni -->
      <Table @supprimerLigne="supprimerLigne" :lignes="lignes" @rechargerListe="rechargerListe" />
    </b-card>
  </div>
</template>

<script>
  import Table from "./components/Table";
  export default {
    // ad
    name: "app",
    // kullanılan bileşenler
    components: {
      Table
    },
    // iç durum
    data() {
      return {
        // simülasyon listesi
        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 }
        ]
      };
    },

    // yöntemler
    methods: {
      // satır silme
      supprimerLigne(index) {
        // eslint-disable-next-line
        console.log("App supprimerLigne", index);
        // [index] konumundaki satırı silme
        this.lignes.splice(index, 1);
      },
      // satır tablosunun yeniden yüklenmesi
      rechargerListe() {
        // eslint-disable-next-line
        console.log("App rechargerListe");
        // satır listesi yeniden oluşturuluyor
        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>

Açıklamalar

Ana görünüm, bir [Table] bileşenini görüntüler (9., 15. ve 21. satırlar);
9. satır: [Table] bileşeni, HTML tablosunda görüntülenecek satırları temsil eden [:lignes] parametresini kabul eder. Bu satırlar, kodun 27-31. satırlarında tanımlanmıştır;
9. satır: [Table] bileşeni iki olay gönderebilir:
- [supprimerLigne]: İndeksi belirtilen bir satırı silmek için (38. satır);
- [rechargerListe]: 27-31 numaralı satırların listesini yeniden oluşturmak için. Nitekim, kullanıcının görüntülenen satırlardan bazılarını silebileceğini göreceğiz;
38-43. satırlar: [supprimerLigne] olayını yönetmekten sorumlu yöntem. Bu yöntem, silinecek satırın indeksini parametre olarak alır;
45-54. satırlar: [rechargerListe] olayını yönetmekle görevli yöntem. 27. satırdaki [lignes] özniteliğini değiştirerek, 9. satırdaki [Table] bileşeninin güncellenmesini sağlarız, çünkü bu bileşenin bir [:lignes="lignes"] parametresi vardır;

14.3. [Table] bileşeni

[Table] bileşeni şöyledir:


<template>
  <div>
    <!-- boş liste -->
    <template v-if="lignes.length==0">
      <b-alert show variant="warning">
        <h4>Votre liste de simulations est vide</h4>
      </b-alert>
      <!-- yeniden yükleme düğmesi-->
      <b-button variant="primary" @click="rechargerListe">Recharger la liste</b-button>
    </template>
    <!-- boş olmayan liste-->
    <template v-if="lignes.length!=0">
      <b-alert show variant="primary" v-if="lignes.length==0">
        <h4>Liste de vos simulations</h4>
      </b-alert>
      <!-- simülasyon tablosu -->
      <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 {
    // özellikler
    props: {
      lignes: {
        type: Array
      }
    },
    // iç durum
    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" }
        ]
      };
    },
    // yöntemler
    methods: {
      // satır silme
      supprimerLigne(index) {
        // eslint-disable-next-line
        console.log("Table supprimerLigne", index);
        // bilgiyi üst bileşene aktarma
        this.$emit("supprimerLigne", index);
      },
      // görüntülenen listenin yeniden yüklenmesi
      rechargerListe() {
        // eslint-disable-next-line
        console.log("Table rechargerListe");
        // üst bileşene bir olay gönderilir
        this.$emit("rechargerListe");
      }
    }
  };
</script>

Açıklamalar

Bu bileşenin iki durumu vardır:

HTML tablosunda bir liste görüntüler;
ya da görüntülenecek listenin boş olduğunu belirten bir mesaj gösterir;

[lignes.length!=0] koşulu doğrulanırsa (12. satır) 1. durum görüntülenir:

[lignes.length==0] koşulu doğrulanırsa (satır 4) ikinci durum görüntülenir.

[lignes], bileşenin bir giriş parametresidir (satır 29-33);
satır 4-10: <div> etiketiyle bir kod bloğu eklemek yerine, burada <template> etiketi kullanılmıştır. İkisi arasındaki fark, <template> etiketinin oluşturulan HTML koduna eklenmemesidir;
9. satır: HTML tablosu tarafından görüntülenen liste boş olduğunda, listeyi yeniden oluşturmayı öneren bir düğme görünür. Bu düğmeye tıklandığında, 57-62. satırlardaki [rechargerListe] yöntemi yürütülür. Bu yöntem, üst bileşene [rechargerListe] olayını gönderir; bu olay, üst bileşenden HTML tablosu tarafından görüntülenen listeyi yeniden oluşturmasını ister;
12-22. satırlar: Görüntülenecek liste boş olmadığında görüntülenen kod;
17. satır: <b-table> etiketi, HTML tablosunu oluşturan etikettir. Burada kullanılan öznitelikler şunlardır:
- [striped]: Satırların arka plan rengi değişir. Çift numaralı satırlar için bir renk, tek numaralı satırlar için başka bir renk kullanılır. Bu, okunabilirliği artırır;
- [hover]: Fareyle üzerine gelindiğinde satırın rengi değişir;
- [responsive]: Tablonun boyutu, onu görüntüleyen ekrana göre uyum sağlar;
- [:items]: görüntülenecek öğelerin tablosu. Burada, bileşene parametre olarak aktarılan [lignes] tablosu (satır 30-32);
- [:fields]: HTML tablosunun sayfa düzenini tanımlayan bir dizi (satır 37-44);
  - [fields] tablosundaki her bir öğe, HTML tablosunun bir sütununu tanımlar;
  - [label]: sütunun başlığını belirtir;
  - [key]: sütunun içeriğini belirtir;
38. satır: HTML tablosunun 0. sütununu tanımlar:
- [#]: sütunun başlığıdır;
- [id]: içeriğidir. Görüntülenen satırın [id] alanı, 0. sütunu dolduracaktır;
39. satır: HTML tablosunun 1. sütununu tanımlar:
- [Marié]: sütunun başlığıdır;
- [marié]: içeriğidir. Görüntülenen satırdaki [marié] alanı, 0. sütunu dolduracaktır;
43. satır: HTML tablosunun son sütununu tanımlar:
- sütunun başlığı yoktur;
- içeriği, görüntülenen satırlarda bulunmayan bir alan olan [action] ile tanımlanmıştır. Bu anahtar, [template]'in 18. satırında referans alınmıştır. Dolayısıyla anahtar burada yalnızca bir sütunu tanımlamak için kullanılmaktadır;
18-20. satırlar: Bu kod, HTML tablosunun son sütununu, yani [action] anahtarını tanımlamak için kullanılır:


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

[v-slot:cell(action)] sözdizimi, [action] anahtar sütununu belirtir. Bu sözdizimi, [fields] tablosunun sözdizimi onu tanımlamak için yeterli olmadığında bir sütunu tanımlamaya olanak tanır. Burada, son sütunun HTML tablosundan bir satırı silmeye yarayan bir bağlantı içermesini istiyoruz:

[<template v-slot:cell(action)="row">] sözdiziminde, [row] adı tablodaki satırı belirtir. İstediğimiz adı kullanabiliriz. [<template v-slot:cell(action)="ligne">] yazabilirdik;

19. satır: [variant=’link’] bağlantısı olarak görüntülenen bir <b-button> düğmesi. Bu bağlantıya tıklandığında [supprimerLigne(row.index)] yöntemi çalıştırılır. Burada [row], kodun 18. satırındaki HTML tablosunun satırına verilen addır;
50-55. satırlar: [supprimerLigne] yöntemi;
54. satır: Silinecek satır numarasıyla birlikte [supprimerLigne] olayı üst bileşene gönderilir;
satır 57-62: [rechargerListe] yöntemi;
satır 61: [rechargerListe] olayı, üst bileşene gönderilir;

14.4. Projenin çalıştırılması

Görüntülenen ilk görünüm şöyledir:

satır olan [1] silindikten sonra görünüm şu hale gelir:

Tüm satırları sildikten sonra:

[2] düğmesine tıkladıktan sonra liste yeniden şu şekilde görüntülenir: