Bagaimana untuk memaparkan berbilang jadual dalam vue pada satu halaman

Dalam pembangunan bahagian hadapan, Vue.js ialah rangka kerja JavaScript yang popular yang memudahkan untuk membangunkan aplikasi satu halaman yang kompleks. Vue.js melaksanakan aliran data sehala melalui paparan dipacu data. Semasa proses pembangunan, kita selalunya perlu menggunakan jadual untuk memaparkan data. Vue.js menyediakan beberapa komponen jadual yang biasa digunakan, tetapi bagaimana jika kita perlu memaparkan berbilang jadual pada satu halaman? Artikel ini akan memperincikan cara memaparkan berbilang jadual pada satu halaman.

1. Gunakan dua komponen untuk melaksanakan dua jadual

Satu komponen dalam Vue.js ialah unit bebas dan gelagat serta datanya boleh digunakan dalam konteks yang berbeza. Memandangkan komponen itu akan dipaparkan semula setiap kali, kami boleh menggunakan dua komponen untuk mencapai paparan jadual yang berbeza.

Pertama, kami mencipta dua komponen, "Jadual1" dan "Jadual2":

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

Di sini, kami mencipta dua komponen jadual dan menggunakan prop yang tidak mengganggu antara satu sama lain untuk menghantar data . Dalam komponen induk, kami menghantar data kepada dua komponen masing-masing, menggunakan arahan 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>

Dengan cara ini, dua jadual boleh dipaparkan pada halaman yang sama.

2. Gunakan satu komponen untuk melaksanakan berbilang jadual

Dalam kaedah di atas, kita perlu mencipta berbilang komponen Jika kita perlu menambah lebih banyak jadual, kita perlu membuat komponen secara berterusan. Oleh itu, kita boleh memaparkan berbilang jadual pada halaman yang sama dengan mengubah suai prop komponen.

Mari ubah suai komponen Jadual:

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

Satu prop baharu ditambahkan pada komponen untuk membezakan jadual yang berbeza. Kini kita boleh menggunakan komponen Jadual yang sama dalam komponen induk, tetapi kita perlu menghantar prop yang berbeza kepada setiap jadual:

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

Dalam jadual, kita boleh menghasilkan data yang berbeza berdasarkan tableId yang berbeza:

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

Dengan cara ini, kita boleh memaparkan berbilang jadual melalui komponen Jadual.

Ringkasnya, kita boleh menggunakan dua komponen untuk melaksanakan berbilang jadual, atau menggunakan satu komponen untuk memaparkan berbilang jadual. Yang pertama memerlukan mencipta berbilang komponen, manakala yang kedua memerlukan menambah prop tambahan pada komponen untuk digunakan. Bergantung pada keperluan projek, kita boleh memilih kaedah yang sesuai untuk memaparkan data.

Atas ialah kandungan terperinci Bagaimana untuk memaparkan berbilang jadual dalam vue pada satu halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!