Comment afficher plusieurs tableaux en vue sur une seule page

Dans le développement front-end, Vue.js est un framework JavaScript populaire qui facilite le développement d'applications complexes d'une seule page. Vue.js implémente un flux de données unidirectionnel via des vues basées sur les données. Pendant le processus de développement, nous devons souvent utiliser des tableaux pour afficher les données. Vue.js fournit certains composants de tableau couramment utilisés, mais que se passe-t-il si nous devons afficher plusieurs tableaux sur une seule page ? Cet article détaillera comment afficher plusieurs tableaux sur une seule page.

1. Utilisez deux composants pour implémenter deux tables

Un composant dans Vue.js est une unité indépendante, et son comportement et ses données peuvent être utilisés dans différents contextes. Étant donné que le composant sera restitué à chaque fois, nous pouvons utiliser deux composants pour obtenir des affichages de tableau différents.

Tout d'abord, nous créons deux composants, "Table1" et "Table2":

<template>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in data" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    data: Array
  }
}
</script>

Ici, nous créons deux composants de table et utilisons des accessoires qui n'interfèrent pas les uns avec les autres pour transmettre les données. Dans le composant parent, nous transmettons les données aux deux composants respectivement, à l'aide de l'instruction v-bind :

<template>
  <div>
    <Table1 :data="data1"></Table1>
    <Table2 :data="data2"></Table2>
  </div>
</template>

<script>
import Table1 from 'path/to/Table1.vue'
import Table2 from 'path/to/Table2.vue'

export default {
  components: {
    Table1,
    Table2
  },
  data() {
    return {
      data1: [...],
      data2: [...]
    }
  }
}
</script>

De cette façon, deux tableaux peuvent être affichés sur la même page.

2. Utilisez un composant pour implémenter plusieurs tables

Dans la méthode ci-dessus, nous devons créer plusieurs composants. Si nous devons ajouter plus de tables, nous devons créer en continu des composants. Par conséquent, nous pouvons afficher plusieurs tableaux sur la même page en modifiant les props du composant.

Modifions le composant Table :

<template>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in data" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    data: Array,
    tableId: String
  }
}
</script>

Ajoutez un nouveau prop dans le composant pour distinguer les différentes tables. Nous pouvons maintenant utiliser le même composant Table dans le composant parent, mais nous devons transmettre différents accessoires à chaque table :

<template>
  <div>
    <Table :data="data1" tableId="table1"></Table>
    <Table :data="data2" tableId="table2"></Table>
  </div>
</template>

<script>
import Table from 'path/to/Table.vue'

export default {
  components: {
    Table
  },
  data() {
    return {
      data1: [...],
      data2: [...]
    }
  }
}
</script>

Dans la table, nous pouvons restituer différentes données en fonction de différents identifiants de table :

<template>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in filteredData" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    data: Array,
    tableId: String
  },
  computed: {
    filteredData() {
      return this.data.filter(item => {
        return item.tableId === this.tableId
      })
    }
  }
}
</script>

De cette façon, nous multiplions les tableaux peuvent être affichés via un composant Table.

Pour résumer, nous pouvons utiliser deux composants pour implémenter plusieurs tableaux, ou nous pouvons utiliser un composant pour afficher plusieurs tableaux. Le premier nécessite la création de plusieurs composants, tandis que le second nécessite l'ajout d'accessoires supplémentaires aux composants à utiliser. En fonction des besoins du projet, nous pouvons choisir la méthode appropriée pour afficher les données.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!