So zeigen Sie mehrere Tabellen in Vue auf einer Seite an

In der Frontend-Entwicklung ist Vue.js ein beliebtes JavaScript-Framework, das die Entwicklung komplexer Single-Page-Anwendungen erleichtert. Vue.js implementiert einen unidirektionalen Datenfluss durch datengesteuerte Ansichten. Während des Entwicklungsprozesses müssen wir häufig Tabellen zur Anzeige von Daten verwenden. Vue.js stellt einige häufig verwendete Tabellenkomponenten bereit, aber was ist, wenn wir mehrere Tabellen auf einer Seite anzeigen müssen? In diesem Artikel erfahren Sie, wie Sie mehrere Tabellen auf einer Seite anzeigen.

1. Verwenden Sie zwei Komponenten, um zwei Tabellen zu implementieren

Eine Komponente in Vue.js ist eine unabhängige Einheit und ihr Verhalten und ihre Daten können in verschiedenen Kontexten verwendet werden. Da die Komponente jedes Mal neu gerendert wird, können wir zwei Komponenten verwenden, um unterschiedliche Tabellenanzeigen zu erzielen.

Zuerst erstellen wir zwei Komponenten, „Tabelle1“ und „Tabelle2“:

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

Hier erstellen wir zwei Tabellenkomponenten und verwenden Requisiten, die sich nicht gegenseitig stören, um Daten zu übergeben. In der übergeordneten Komponente übergeben wir die Daten mithilfe der V-Bind-Anweisung an die beiden Komponenten:

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

Auf diese Weise können zwei Tabellen auf derselben Seite angezeigt werden.

2. Verwenden Sie eine Komponente, um mehrere Tabellen zu implementieren. Bei der obigen Methode müssen wir mehrere Komponenten erstellen. Wenn wir weitere Tabellen hinzufügen müssen, müssen wir kontinuierlich Komponenten erstellen. Daher können wir mehrere Tabellen auf derselben Seite anzeigen, indem wir die Requisiten der Komponente ändern.

Ändern wir die Tabellenkomponente:

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

Fügen Sie eine neue Requisite in der Komponente hinzu, um verschiedene Tabellen zu unterscheiden. Jetzt können wir dieselbe Tabellenkomponente in der übergeordneten Komponente verwenden, müssen aber an jede Tabelle unterschiedliche Requisiten übergeben:

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

In der Tabelle können wir unterschiedliche Daten basierend auf unterschiedlichen Tabellen-IDs rendern:

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

Auf diese Weise multiplizieren wir Tabellen können über eine Tabellenkomponente angezeigt werden.

Zusammenfassend können wir zwei Komponenten verwenden, um mehrere Tabellen zu implementieren, oder wir können eine Komponente verwenden, um mehrere Tabellen anzuzeigen. Ersteres erfordert die Erstellung mehrerer Komponenten, während letzteres das Hinzufügen zusätzlicher Requisiten zu den zu verwendenden Komponenten erfordert. Abhängig von den Anforderungen des Projekts können wir die geeignete Methode zur Darstellung der Daten wählen.

Das obige ist der detaillierte Inhalt vonSo zeigen Sie mehrere Tabellen in Vue auf einer Seite an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!