vue页面显示两个表格
时间: 2023-06-26 09:04:13 浏览: 81
你可以使用Vue的组件化思想,将每个表格封装成一个组件,然后在父组件中引入这两个子组件并渲染。以下是一个简单的示例:
在父组件中:
```html
<template>
<div>
<table1></table1>
<table2></table2>
</div>
</template>
<script>
import Table1 from './Table1.vue'
import Table2 from './Table2.vue'
export default {
components: {
Table1,
Table2
}
}
</script>
```
在Table1组件中:
```html
<template>
<table>
<!-- 表格1的内容 -->
</table>
</template>
<script>
export default {
// 组件的其他配置
}
</script>
```
在Table2组件中:
```html
<template>
<table>
<!-- 表格2的内容 -->
</table>
</template>
<script>
export default {
// 组件的其他配置
}
</script>
```
这样,当父组件渲染时,会自动渲染Table1和Table2两个子组件的内容,并且每个表格的功能和样式都可以在对应的子组件中进行单独配置。