在前端开发中，Vue.js 是一个流行的 JavaScript 框架，它能够使我们开发复杂的单页面应用变得更加简单。Vue.js 通过数据驱动视图的方式来实现单向数据流。在开发过程中，我们经常需要用到表格来展示数据。Vue.js 提供了一些常用的表格组件，但如果我们需要在一个页面上面展示多个表格，该怎么做呢？本文将详细介绍如何在一个页面中展示多个表格。
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>这样，就可以在同一个页面上显示两个表格了。
在上面的方法中，我们需要创建多个组件，如果需要增加更多的表格，我们需要不断地创建组件。因此，我们可以通过修改组件的 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中文网其他相关文章！
