vue如何在一個頁面中展示多個表格

在前端開發中，Vue.js 是一個流行的 JavaScript 框架，它能夠使我們開發複雜的單一頁面應用程式變得更加簡單。 Vue.js 透過資料驅動視圖的方式來實現單向資料流。在開發過程中，我們常需要用到表格來展示資料。 Vue.js 提供了一些常用的表格元件，但如果我們需要在一個頁面上面展示多個表格，該怎麼做呢？本文將詳細介紹如何在一個頁面中展示多個表格。

1. 使用兩個元件實作兩個表格

Vue.js 中的元件是一個獨立的單元，它的行為和資料可以在不同的上下文中使用。考慮到元件每次都會重新渲染，我們可以使用兩個元件來實現不同的表格展示。

首先，我們建立兩個元件，「Table1」和「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>

這裡，我們建立兩個表格元件，並且使用互不干擾的 props 來傳遞資料。在父元件中，我們將資料分別傳遞給這兩個元件，用 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>

這樣，就可以在同一個頁面上顯示兩個表格了。

2. 使用一個元件實作多個表格

在上面的方法中，我們需要建立多個元件，如果需要增加更多的表格，我們需要不斷地建立元件。因此，我們可以透過修改元件的 props 來實現在同一個頁面上顯示多個表格。

我們來修改 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>

在元件中增加了一個新的 prop，用來區分不同的表格。現在我們可以在父元件中使用同一個Table 元件，但需要給每個表格傳遞不同的prop：

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

在表格中，我們可以根據不同的tableId 來渲染不同的資料：

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

這樣，我們就可以透過一個Table 元件來展示多個表格了。

綜上所述，我們可以使用兩個元件實作多個表格，也可以使用一個元件來展示多個表格。前者需要建立多個元件，後者則需要在元件中增加額外的 prop 來使用。根據專案的需求，我們可以選擇合適的方法來展示數據。

以上是vue如何在一個頁面中展示多個表格的詳細內容。更多資訊請關注PHP中文網其他相關文章！